如何有重叠的药丸进度条

Question

我正在尝试在 bootstrap 中创建一个进度条，上面有投影和实际结果，但是设计的愿望是在右侧边缘有一个圆形的“药丸”形状。以下 sn-p 显示了我能够实现的目标：

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