To achieve this effect, JavaScript is necessary.
In order for the label to be displayed in front of the progress bar, you must set the label's position to absolute.
Then, using JavaScript, retrieve the bar, label, and container widths for later use.
After that, set the width of the bar, add the label width to it, check if it fits the container, move it from the right by calculating the gap if needed, or place it at the far right if it doesn't fit properly, thus displaying it in front of the bar.
Here is the essential code snippet:
if ((bar + label) < container) {
labelEl.style.setProperty('right', `${container-(bar+label)}px`);
} else {
labelEl.style.right = `0`;
}
Furthermore, manual animation of the label is required, so include the following transition style for the bar:
style="transition:right .6s ease;"
Below is a demonstration snippet (note that it may have some bugs but should offer a general understanding of how it can be done, depending on how you set the widths):
addEventListener("DOMContentLoaded", (event) => {
let iteration = 1;
const interval = setInterval(function() {
const barEl = document.querySelector('.progress-bar');
barEl.style.setProperty('width', iteration * 5 + '%');
const labelEl = document.querySelector('.progress-label');
const container = parseFloat(getComputedStyle(document.querySelector('.progress')).width);
let bar = parseFloat(getComputedStyle(barEl).width);
const labelData = getComputedStyle(labelEl);
// calc margins
const labelMargins = parseFloat(labelData.marginLeft) + parseFloat(labelData.marginRight);
const label = parseFloat(labelData.width) + labelMargins * 2;
// check spacing, move label accordingly
// else, fix to right
if ((bar + label) < container) {
labelEl.style.setProperty('right', `${container-(bar+label)}px`);
} else {
labelEl.style.right = `0`;
}
labelEl.textContent = iteration * 5 + '%';
if (++iteration > 20) {
clearInterval(interval);
}
}, 300);
})
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="25474a4a51565157445565100b140b">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8fece0fdeacfbda1bebfa1bd">[email protected]</a>/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="27454848535453554657671209160914">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col"></th>
<th scope="col"></th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td></td>
<td></td>
<td class="occurrence fw-normal text-light small pe-4">
<div class="progress position-relative">
<div class="progress-bar occurrence"
role="progressbar"
aria-valuemin="0"
aria-valuemax="100"
aria-valuenow="100"
data-bs-toggle="tooltip"
data-bs-placement="top"
title=""
data-bs-original-title="Appears in 10 comments"
aria-label="Appears in 10 comments">
</div>
<span class="occurrence percentage mx-2 fw-bold progress-label position-absolute" style="transition:right .6s ease;"></span>
</div>
</td>
</tr>
</tbody>
</table>