How to Create Animated Progress Bar HTML

The progress bar is a part of the web, the progress bar can be used for different categories such as marks obtained, skill mapping unit, etc. To create an animated progress bar we can use HTML and CSS. To make that progress bar responsive we need JavaScript.

HTML Code: We create a parent div with a class named soft progress that will set the full-length unit and the derive div will set the obtaining unit.

<div class=”softprogress”>
 <p>Progress Bar to — <strong>90%</strong></p>
 <div code-softprogress=”90"></div>
 <p>Progress Bar to — <strong>65%</strong></p>
 <div code-softprogress=”65"></div>
 <p>Progress Bar to — <strong>95%</strong></p>
 <div code-softprogress=”95"></div>
</div>

CSS CODE:

<style type=”text/css”>
 * {
 font-family: sans-serif;
 font-weight: bold;
}
/* softprogress bar CSS */
.softprogress *:not([code-softprogress]) {
 margin: 5px 0;
 font-size: 16px;
}
.softprogress {
 width: 100%;
 max-width: 500px;
 padding: 15px;
 box-sizing: border-box;
}
.softprogress [code-softprogress] {
 height: 25px;
 box-shadow: 0 0 1px 1px rgba(0, 20, 0, 0.35) inset;
 border-radius: 15px;
 margin: 5px 0 10px 0;
 overflow: hidden;
 background-color: #ddd;
}
[code-softprogress]::after {
 content: “”;
 display: flex;
 justify-content: flex-end;
 align-items: center;
 background: #2f8d46;
 width: 0;
 height: 100%;
 box-sizing: border-box;
 font-size: 16px;
 color: #fff;
 border-radius: 15px;
 padding: 0 3px;
 transition: 2s;
}
[code-softprogress].run-softprogress::after {
 content: attr(code-softprogress) “%”;
 width: var( — run-softprogress);
}
/* End softprogress bar CSS */
</style>

JavaScript Code:

<script type=”text/javascript”>
 window.onload = function () {
 if (
 document.querySelectorAll(“.softprogress”).length > 0 &&
 document.querySelectorAll(“.softprogress [code-softprogress]”).length > 0
 ) {
 document
 .querySelectorAll(“.softprogress [code-softprogress]”)
 .forEach((x) => runsoftprogress(x));
 }};
function runsoftprogress(el) {
 el.className = “run-softprogress”;
 el.setAttribute(
 “style”,
 ` — run-softprogress:${el.getAttribute(“code-softprogress”)}%;`
 );}
</script>

Conclusion:

We have done to build an Animated Progress Bar HTML CSS and Javascript. You customize the code or just copy and paste it to your webpage. That’s It.