How to have overlapping pill progress bars

Question

I am trying to create a progress bar in bootstrap with both projected and actual results on it, however the design desire is to have a rounded "pill" shape on the right hand edge. The following snippet shows what I have been able to achieve:

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;
}

What I would like is for the lighter purple to fill the small slivers left by the rounded edge of the darker purple, while still having a consistent way to set the width of the bars by percentage. Any help would be appreciated.

Edit:

Thanks to Tasos Bu and their answer I was able to find a full solution that fitted my intention including covering edge cases and having the actual portion of the bar terminate at the desired point. The fiddle for this can be found here if anyone in the future wants to see it.

Final Edit:

After more playing around I finally achieved the full desired functionality, that anyone viewing this might find useful: JSFiddle link

user_5605822 · Answer

You can add a pseudo-element before the second bar and remove the radius of the first one: Related to this answer

EDIT: Keep in mind that this will "push" the first bar a little bit to the right, so you should handle this when setting its width with 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;
}

How to have overlapping pill progress bars

Edit:

Final Edit:

1 Answers