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