如何让药丸进度条重叠

Question

我正在尝试在引导程序中创建一个进度条，其中包含预计结果和实际结果，但是设计愿望是在右侧边缘有一个圆形的“药丸”形状。以下代码片段显示了我所取得的成就：

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和他们的回答，我能够找到符合我意图的完整解决方案，包括覆盖边缘情况并使条的实际部分终止于所需的点。如果将来有人想看到它，可以在这里找到它的小提琴。

最终编辑：

经过更多的尝试后，我终于实现了所需的全部功能，任何查看此内容的人都可能会发现有用：JSFiddle 链接

Answer 1

您可以在第二个栏之前添加一个伪元素并删除第一个栏的半径：与此答案相关

编辑：请记住，这会将第一个栏“推”到右侧一点，因此您应该在使用 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>