javascript - 如何有重叠的药丸进度条

Question

我试图在 bootstrap 中创建一个进度条，上面有投影和实际结果，但是设计的愿望是在右手边有一个圆形的“药丸”形状。以下代码段显示了我已经能够实现的目标:

const data = {
    actual: 1155,
  projected: 1573,
  limits: [500, 1000, 2500]
};

const actualProgress = document.getElementById("actual-progress");
const projectedProgress = document.getElementById("projected-progress");

const barLength = Math.max(...data.limits);
const actualPercentage = (data.actual / barLength) * 100;
const projectedPercentage = ((data.projected - data.actual) / barLength) * 100;

actualProgress.style.width = `${actualPercentage}%`;
projectedProgress.style.width = `${projectedPercentage}%`;

.progress-bar.bg-actual {
  background: #b445f5;
}

.progress-bar.bg-projected {
  background: #d391fa;
}

.progress-bar {
  border-radius: 0 500px 500px 0;
}

.progress {
  border-radius: 500px !important;
  height: 30px !important;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container pt-4">
  <div class="row">
    <div class="col">
      <div class="progress">
        <div id="actual-progress" class="progress-bar bg-actual"></div>
        <div id="projected-progress" class="progress-bar bg-projected"></div>
      </div>
    </div>
  </div>
</div>

我想要的是用浅紫色填充深紫色圆形边缘留下的小条子，同时仍然有一致的方法来按百分比设置条形的宽度。任何帮助，将不胜感激。
编辑:
多亏了 Tasos Bu 和他们的回答，我才能找到符合我的意图的完整解决方案，包括覆盖边缘情况和让条的实际部分在所需的点终止。可以找到这个 fiddle here如果以后有人想看的话。
最终编辑:
经过更多的尝试，我终于实现了所需的全部功能，任何查看此内容的人都可能会觉得有用:JSFiddle link

Answer 1

您可以在第二个条形之前添加一个伪元素并删除第一个条形的半径:
相关 this answer
编辑 :请记住，这会将第一个栏“推”到右侧一点点，因此在使用 javascript 设置其宽度时应该处理此问题。

const data = {
    actual: 1155,
  projected: 1573,
  limits: [500, 1000, 2500]
};

const actualProgress = document.getElementById("actual-progress");
const projectedProgress = document.getElementById("projected-progress");

const barLength = Math.max(...data.limits);
const actualPercentage = (data.actual / barLength) * 100;
const projectedPercentage = ((data.projected - data.actual) / barLength) * 100;

actualProgress.style.width = `${actualPercentage}%`;
projectedProgress.style.width = `${projectedPercentage}%`;

.progress-bar.bg-actual {
  background: #b445f5;
  border-radius: 0;
}

.progress-bar.bg-projected {
  background: blue;
  position: relative;
}
.progress-bar.bg-projected:before {
  width: 30px;
  height: 30px;
  border-radius:0 500px 500px 0;
  background-color: #b445f5;    
  display: inline-block;
  vertical-align: middle;
  content: '';
}

.progress-bar {
  border-radius: 0 500px 500px 0;
}


.progress {
  border-radius: 500px !important;
  height: 30px !important;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container pt-4">
  <div class="row">
    <div class="col">
      <div class="progress">
        <div id="actual-progress" class="progress-bar bg-actual"></div>
        <div id="projected-progress" class="progress-bar bg-projected"></div>
      </div>
    </div>
  </div>
</div>