progress bar
Tue Apr 30 2024 02:14:45 GMT+0000 (Coordinated Universal Time)
Saved by
@nofil
<!-- html -->
<div class="serviceFlexBox">
<p>
Donation
</p>
<p>
90%
</p>
</div>
<div class="progress-container">
<div class="progress-bar"></div>
</div>
<div class="serviceFlexBox">
<p>
Raised: $9,000
</p>
<p>
Goal: $10,000
</p>
</div>
<!-- css -->
.progress-container {
width: 100%;
background-color: #C7E7DF;
border-radius: 20px;
}
.progress-bar {
/* width: 90%; */
height: 10px;
background-color: #0267B6;
text-align: center;
line-height: 30px;
color: white;
font-size: 0;
border-radius: 10px;
}
<!-- js -->
jQuery(document).ready(function() {
var bars = document.getElementsByClassName("progress-bar");
var width = 0;
var id = setInterval(frame, 10);
function frame() {
if (width >= 90) {
clearInterval(id);
} else {
width++;
for (var i = 0; i < bars.length; i++) {
bars[i].style.width = width + '%';
bars[i].innerHTML = width * 1 + '%';
}
}
}
});
content_copyCOPY
Comments