<span>Just place all your <strong>bar</strong> divs into the <strong>progress</strong> div and set the attribute <strong>data-progress</strong> to the value of each one. ezpz!</span>

<div class="progress">
  <p>Example 1 - <strong>80%</strong></p>
  <div data-progress="80"></div>
  <p>Example 2 - <strong>20%</strong></p>
  <div data-progress="20"></div>
  <p>Example 3 - <strong>33%</strong></p>
  <div data-progress="33"></div>
  <p>Example 4 - <strong>100%</strong></p>
  <div data-progress="100"></div>
  <p>Example 5 - <strong>1%</strong></p>
  <div data-progress="1"></div>
  <p>Example 6 - <strong>25.75%</strong></p>
  <div data-progress="25.75"></div>
</div>

/* This sample only CSS */

* {
  font-family: sans-serif;
}

span {
  display: block;
  padding: 15px;
}

/* End This sample only CSS */

/* Progress bar CSS */

.progress *:not([data-progress]) {
  margin: 5px 0;
  font-size: 14px;
}

.progress {
  width: 100%;
  max-width: 500px;
  padding: 15px;
  box-sizing: border-box;
}

.progress [data-progress] {
  height: 15px;
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25) inset;
  border-radius: 2px;
  margin: 5px 0 10px 0;
  overflow: hidden;
}

[data-progress]::after {
  content: "";
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-image: linear-gradient(#99caff, #1a88ff 50%, #007bff 50%);
  width: 0;
  height: 100%;
  box-sizing: border-box;
  font-size: 10px;
  color: white;
  padding: 0 3px;
  transition: 2s;
}

[data-progress].animate-progress::after {
  content: attr(data-progress) "%";
  width: var(--animate-progress);
}

/* End Progress bar CSS */

// Once all content has been loaded, the function check if there is at least 1 container with class 'progress' and at least 1 child with 'data-progress' attribute inside the container
window.onload = function () {
  if (
    document.querySelectorAll(".progress").length > 0 &&
    document.querySelectorAll(".progress [data-progress]").length > 0
  ) {
    // Get all elements with 'data-progress' attribute and run the 'AnimateProgress' funcion with each one
    document
      .querySelectorAll(".progress [data-progress]")
      .forEach((x) => AnimateProgress(x));
  }
};

function AnimateProgress(el) {
  // Get the element that came as parameter and add the class 'animated-progress' on it
  el.className = "animate-progress";
  // Set the attribute 'style' of this element with the custom attribute '--animate-progress' and the value of 'data-progress' as the width value
  el.setAttribute(
    "style",
    `--animate-progress:${el.getAttribute("data-progress")}%;`
  );
  // After this the CSS make its magic
}