The Animated progress bar is a part of the web, the progress bar can be used for different categories such as marks obtained, skill mapping units, etc. To create an animated progress bar with different bar background colors we can use HTML and CSS and a bit of JS to make that progress bar responsive we need JavaScript.
In this article, we will learn to create animated progress bars using HTML and CSS. A progress bar is developed by using two HTML “div”, the container with the class “softprogress“, as shown in the following examples.
Animated Progress Bar
HTML Code: We create a parent div with a class named softprogress and countbar that will set the height of a progress bar unit and the derive div will set the obtaining unit.
HTML Code:
<div class="container ">
<div class="progress">
<div class="bar-text">
<h3>Progress Bar to - 80%</h3>
</div>
<div class="softprogress">
<!-- You can set background color by using HEX code #000 -->
<div style="background:#000" class="countbar" data-percentNumber="80"></div>
</div></div>
<div class="progress">
<div class="bar-text">
<h3>Progress Bar to - 65%</h3>
</div>
<div class="softprogress">
<!-- You can set background color by using color name or HEX code #000 -->
<div style="background:green" class="countbar" data-percentNumber="65"></div>
</div></div>
<div class="progress">
<div class="bar-text">
<h3>Progress Bar to - 75%</h3>
</div>
<div class="softprogress">
<!-- You can set background color by using color name or code #000 -->
<div style="background:blue" class="countbar" data-percentNumber="75"></div>
</div></div>
</div>CSS Code:
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #c11123;
color: #fff;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}
.container {
width: 50%;
margin: 0 auto;
}
.progress {
margin: 25px 0;
}
.bar-text {
display: flex;
justify-content: space-between;
margin-bottom: 13px;
}
.bar-text h3 {
font-size: 25px;
text-transform: capitalize;
font-weight: 500;
}
.softprogress {
height: 20px; /*Change the height of a progress bar*/
background: #c8d6e5; /*Change the bar background color*/
border-radius: 20px;
}
.countbar {
height: 20px; /*Change the height of a progress bar*/
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
position: relative;
}
.countbar h3 {
position: absolute;
right: -19px;
top: -35px;
background: #34495e;
padding: 4px 6px;
font-size: 16px;
font-weight: 400;
border-radius: 5px;
}
.countbar h3::after {
content: "";
position: absolute;
bottom: -10px;
left: 50%;
width: 11px;
height: 11px;
background: #34495e;
transform: rotate(45deg) translateX(-60%);
}
</style>JavaScript Code:
<script>
let numberPercent = document.querySelectorAll('.countbar')
let getPercent = Array.from(numberPercent)
getPercent.map((items) => {
let startCount = 0
let progressBar = () => {
startCount ++
items.innerHTML = `<h3>${startCount}%</h3>`
items.style.width = `${startCount}%`
if(startCount == items.dataset.percentnumber) {
clearInterval(stop)
}
}
let stop = setInterval(() => {
progressBar()
},25)
})
</script>Conclusion:
Here we build a professional and responsive animated progress bar with different colors by using HTML, CSS, and Javascript.