I am attempting to design a progress bar in bootstrap that displays projected and actual results, with a unique rounded "pill" shape on the right side. Below is the code snippet showcasing my progress:
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>I would like to have the lighter purple color fill the small gaps left by the rounded edge of the darker purple, while still maintaining a consistent way to set the width of the bars as a percentage. Any assistance on this matter would be highly appreciated.
Edit:
Credit to Tasos Bu for providing me with an answer that helped me achieve my intended design, covering edge cases and ensuring the actual part of the bar stops at the desired point. The working solution can be found on this JSFiddle link for reference.
Final Edit:
After some additional tinkering, I finally managed to implement the full functionality I was aiming for. For those reading this, you can check out the finalized version through this JSFiddle link.