Animated Progress Bar Designs Multiple Examples
Updated on
...
12th May 2023
It's essential to show progress when users are doing things like uploading, downloading, or waiting for something to finish. A CSS progress bar is a good way to do this.
It can be frustrating when users have to wait for a page to finish loading. Adding a progress bar can help users know that the page is still working and not broken.
A progress bar helps users see how long something will take and how far along they are. The progress bar needs to work smoothly and update in real time. If it doesn't, users may get frustrated and leave.
In this tutorial, we will look at different types of progress bars and learn how to make a progress bar animate only when the user scrolls to that part of the page. We will use JavaScript to do this.
Example 1: Animate Progress Bars using Bootstrap 5 and Javascript
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous"></script>
<section id="skills" class="skills section-bg">
<div class="container" data-aos="fade-up">
<div class="section-title text-center">
<h2>Skills</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci magni ullam non quisquam, ratione
commodi distinctio odit natus illo vitae atque accusamus eligendi, soluta voluptates sapiente
deserunt quidem corporis. Mollitia!</p>
</div>
<div class="row skills-content">
<div class="col-lg-6">
<div class="progress">
<span class="skill">HTML <i class="val">100%</i></span>
<div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100"
data-percentage="100"></div>
</div>
<div class="progress">
<span class="skill">CSS <i class="val">90%</i></span>
<div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100"
data-percentage="90"></div>
</div>
<div class="progress">
<span class="skill">JavaScript <i class="val">75%</i></span>
<div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100"
data-percentage="75"></div>
</div>
</div>
<div class="col-lg-6">
<div class="progress">
<span class="skill">PHP <i class="val">70%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100"
data-percentage="70">
</div>
</div>
</div>
<div class="progress">
<span class="skill">WordPress/CMS <i class="val">60%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100"
data-percentage="60">
</div>
</div>
</div>
<div class="progress">
<span class="skill">Photoshop <i class="val">85%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100"
data-percentage="85">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
.skills .progress {
height: 60px;
display: block;
background: none;
border-radius: 0;
}
.skills .progress .skill {
padding: 10px 0;
margin: 0;
text-transform: uppercase;
display: block;
font-weight: 600;
font-family: "Poppins", sans-serif;
color: #45505b;
}
.skills .progress .skill .val {
float: right;
font-style: normal;
}
.skills .progress-bar-wrap {
background: #f2f3f5;
}
.skills .progress-bar {
width: 1px;
height: 10px;
transition: 0.9s;
background-color: #0563bb;
}
.section-title h2 {
font-size: 32px;
font-weight: bold;
text-transform: uppercase;
margin-bottom: 20px;
padding-bottom: 20px;
position: relative;
color: #45505b;
}
.section-title h2::before {
content: "";
position: absolute;
display: block;
width: 120px;
height: 1px;
background: #ddd;
bottom: 1px;
left: calc(50% - 60px);
}
.section-title h2::after {
content: "";
position: absolute;
display: block;
width: 40px;
height: 3px;
background: #0563bb;
bottom: 0;
left: calc(50% - 20px);
}
const progressBars = document.querySelectorAll('.progress-bar');
progressBars.forEach(progressBar => {
// Get the percentage value from the data attribute
const percentage = progressBar.dataset.percentage;
// Animate the progress bar to the percentage value
progressBar.style.width = percentage + '%';
progressBar.innerText = percentage + '%';
});
Example 2: Animate Progress Bars on Page Scroll using Bootstrap 5 and Javascript
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous"></script>
<!-- ======= Skills Section ======= -->
<section id="skills" class="skills section-bg">
<div class="container" data-aos="fade-up">
<div class="section-title" style="padding-bottom: 200px; padding-top: 70px;">
<h2>Scroll Down to see animated progress bar</h2>
<p>Scroll Down to see animated progress bar</p>
</div>
<div class="section-title" style="padding-bottom: 200px;">
<h2>Scroll Down to see animated progress bar</h2>
<p>Scroll Down to see animated progress bar</p>
</div>
</div>
</section>
<!-- ======= Skills Section ======= -->
<section id="skills" class="skills section-bg" style="padding-bottom:70px">
<div class="container" data-aos="fade-up">
<div class="section-title">
<h2>Skills</h2>
<p>Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint
consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia
fugiat sit
in iste officiis commodi quidem hic quas.</p>
</div>
<div class="row skills-content">
<div class="col-lg-6">
<div class="progress">
<span class="skill">HTML <i class="val">100%</i></span>
<div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100"
data-percentage="100"></div>
</div>
<div class="progress">
<span class="skill">CSS <i class="val">90%</i></span>
<div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100"
data-percentage="90"></div>
</div>
<div class="progress">
<span class="skill">JavaScript <i class="val">75%</i></span>
<div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100"
data-percentage="75"></div>
</div>
</div>
<div class="col-lg-6">
<div class="progress">
<span class="skill">PHP <i class="val">80%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100"
data-percentage="60">
</div>
</div>
</div>
<div class="progress">
<span class="skill">WordPress/CMS <i class="val">90%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100"
data-percentage="60">
</div>
</div>
</div>
<div class="progress">
<span class="skill">Photoshop <i class="val">55%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100"
data-percentage="60">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
.skills .progress {
height: 60px;
display: block;
background: none;
border-radius: 0;
}
.skills .progress .skill {
padding: 10px 0;
margin: 0;
text-transform: uppercase;
display: block;
font-weight: 600;
font-family: "Poppins", sans-serif;
color: #45505b;
}
.skills .progress .skill .val {
float: right;
font-style: normal;
}
.skills .progress-bar-wrap {
background: #f2f3f5;
}
.skills .progress-bar {
width: 1px;
height: 10px;
transition: 0.9s;
background-color: #0563bb;
}
// Function to handle the progress bar animation
function animateProgressBar(progressBar) {
const percentage = progressBar.dataset.percentage;
progressBar.style.width = percentage + '%';
progressBar.innerText = percentage + '%';
}
// Function to check if an element is in the viewport
function isInViewport(element) {
const rect = element.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
);
}
// Select all progress bar elements
const progressBars = document.querySelectorAll('.progress-bar');
// Function to handle scroll event
function handleScroll() {
progressBars.forEach(progressBar => {
if (isInViewport(progressBar)) {
animateProgressBar(progressBar);
}
});
}
// Add scroll event listener
window.addEventListener('scroll', handleScroll);
// Trigger the initial check on page load
handleScroll();
Example 2: Animate Circle Progress Bars on Page Scroll using Bootstrap 4 and jQuery
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<div class="container-fluid pt-4 pb-2 bg-white" style="margin-top:600px;">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="main_title centered upper">
<h2><span class="line"><span class="dot"></span></span>
Rounded progressbar on window scroll </h2>
</div>
</div>
<div class="col-md-4">
<div class="col-sm-12 border p-0 rounded">
<div class="col-12 p-3">
<h3>Title here</h3>
<p>Lorem ipsum is simple dummy text Lorem ipsum is simple dummy text</p>
<h3>Title here</h3>
<p>Lorem ipsum is simple dummy text Lorem ipsum is simple dummy text</p>
<h3>Title here</h3>
<p>Lorem ipsum is simple dummy text Lorem ipsum is simple dummy text</p>
</div>
</div>
</div>
<div class="col-md-8 pl-md-4">
<div class="row ">
<!-- 1 -->
<div class="col-6 col-lg-4 text-center ">
<h4>Skill one</h4>
<div class="progress yellow_75 mt-2 mt-md-3 mb-md-5 mb-3">
<span class="progress-left">
<span class="progress-bar "></span>
</span>
<span class="progress-right">
<span class="progress-bar "></span>
</span>
<div class="progress-value count">75</div>
</div>
</div>
<!-- 2 -->
<div class="col-6 col-lg-4 text-center ">
<h4>Skill two</h4>
<div class="progress yellow_90 mt-2 mt-md-3 mb-md-5 mb-3 ">
<span class="progress-left">
<span class="progress-bar "></span>
</span>
<span class="progress-right">
<span class="progress-bar "></span>
</span>
<div class="progress-value count">90</div>
</div>
</div>
<!-- 3 -->
<div class="col-6 col-lg-4 text-center ">
<h4>Skill three</h4>
<div class="progress yellow_60 mt-2 mt-md-3 mb-md-5 mb-3">
<span class="progress-left">
<span class="progress-bar "></span>
</span>
<span class="progress-right">
<span class="progress-bar "></span>
</span>
<div class="progress-value count">60</div>
</div>
</div>
<!-- 4 -->
<div class="col-6 col-lg-4 text-center ">
<h4>Skill four</h4>
<div class="progress yellow_60 mt-2 mt-md-3 mb-md-5 mb-3">
<span class="progress-left">
<span class="progress-bar "></span>
</span>
<span class="progress-right">
<span class="progress-bar "></span>
</span>
<div class="progress-value count">60</div>
</div>
</div>
<!-- 5 -->
<div class="col-6 col-lg-4 text-center ">
<h4>Skill five</h4>
<div class="progress yellow_90 mt-2 mt-md-3 mb-md-5 mb-3 ">
<span class="progress-left">
<span class="progress-bar "></span>
</span>
<span class="progress-right">
<span class="progress-bar "></span>
</span>
<div class="progress-value count">90</div>
</div>
</div>
<!-- 6 -->
<div class="col-6 col-lg-4 text-center ">
<h4>Skill six</h4>
<div class="progress yellow_75 mt-2 mt-md-3 mb-md-5 mb-3">
<span class="progress-left">
<span class="progress-bar "></span>
</span>
<span class="progress-right">
<span class="progress-bar "></span>
</span>
<div class="progress-value count">75</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
.progress {
width: 130px;
height: 130px;
line-height: 130px;
background: none;
margin: 0 auto;
box-shadow: none;
position: relative;
}
.progress:after {
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
border: 12px solid transparent;
position: absolute;
top: 0;
left: 0;
}
.progress>span {
width: 50%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
z-index: 1;
}
.progress .progress-left {
left: 0;
}
.progress .progress-bar {
width: 100%;
height: 100%;
background: none;
border-width: 6px;
border-style: solid;
position: absolute;
top: 0;
}
.progress .progress-left .progress-bar {
left: 100%;
border-top-right-radius: 80px;
border-bottom-right-radius: 80px;
border-left: 0;
-webkit-transform-origin: center left;
transform-origin: center left;
}
.progress .progress-right {
right: 0;
}
.progress .progress-right .progress-bar {
left: -100%;
border-top-left-radius: 80px;
border-bottom-left-radius: 80px;
border-right: 0;
-webkit-transform-origin: center right;
transform-origin: center right;
}
.progress .progress-value {
width: 90%;
height: 90%;
border-radius: 50%;
background:
rgba(0, 0, 0, .02);
/*box-shadow: 0px 0px 5px solid rgba(0,0,0,.8);*/
border: 6px solid rgba(0, 0, 0, .05);
font-size: 24px;
color:
#e95095;
line-height: 106px;
text-align: center;
position: absolute;
top: 5%;
left: 5%;
}
.progress.yellow_90 .progress-bar {
border-color:
#e95095;
}
.progress .progress-right .progress-bar.round_animate {
animation: loading-1 1.2s linear forwards;
}
.progress.yellow_90 .progress-left .progress-bar.round_animate {
animation: loading-2 1s linear forwards 1.2s;
}
.progress.yellow_75 .progress-bar {
border-color:
#7049ba;
}
.progress.yellow_75 .progress-left .progress-bar.round_animate {
animation: loading-3 1s linear forwards 1.2s;
}
.progress.yellow_60 .progress-bar {
border-color:
#7049ba;
}
.progress.yellow_60 .progress-left .progress-bar.round_animate {
animation: loading-4 1s linear forwards 1.2s;
}
.progress.green .progress-bar {
border-color:
#1abc9c;
}
.progress.green .progress-left .progress-bar.round_animate {
animation: loading-5 1s linear forwards 1.2s;
}
@keyframes loading-1 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
}
@keyframes loading-2 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(144deg);
transform: rotate(144deg);
}
}
@keyframes loading-3 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
@keyframes loading-4 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(36deg);
transform: rotate(36deg);
}
}
@keyframes loading-5 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(126deg);
transform: rotate(126deg);
}
}
@media only screen and (max-width: 990px) {
.progress {
margin-bottom: 20px;
}
}
/*my coding*/
.round_statusbar {
background: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5)),
url(images/bann1.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
min-height: 300px;
}
.border_single {
display: inline-block;
width: 50px;
height: 3px;
background:
#fdba04;
margin-top: 15px;
}
.count:after {
content: '%';
}
.centered {
text-align: center;
}
.main_title h2 {
color:
#324545;
font-size: 30px;
font-weight: 400;
letter-spacing: 1px;
margin-bottom: 40px;
padding-bottom: 20px;
position: relative;
font-family: "Oswald", "Open Sans", sans-serif;
line-height: 40px;
}
.row_spacer>.main_title,
.row_spacer_t>.main_title,
.row_spacer>.content>.main_title,
.icons_spacer>.main_title {
margin-top: -25px;
}
.main_title h2 .line {
background:
rgba(0, 0, 0, 0.07);
bottom: 0;
height: 1px;
position: absolute;
width: 33%;
}
.main_title.centered span,
.main_title.centered span:before {
left: 50%;
transform: translateX(-50%);
}
.main_title .line:before {
background:
#1cc6df;
content: "";
display: block;
height: 1px;
position: absolute;
width: 100px;
transition: all .3s;
}
.main_title .dot {
background:
#fff;
border: 1px solid #1cc6df;
height: 10px;
position: absolute;
top: -5px;
width: 10px;
-webkit-border-radius: 100%;
}
.main_title h2:hover .line:before {
width: 75%;
}
$(document).ready(function () {
$(this).scrollTop(0);
});
var $window = $(window);
var $elem = $(".progress-bar")
function isScrolledIntoView($elem, $window) {
var docViewTop = $window.scrollTop();
var docViewBottom = docViewTop + $window.height();
var elemTop = $elem.offset().top;
var elemBottom = elemTop + $elem.height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
$(window).scroll(function () {
if (isScrolledIntoView($elem, $window)) {
$elem.addClass("round_animate");
//console.log("now you see me");
$('.count').each(function () {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 2200,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
},
complete: function () {
$(this).text(Math.ceil(now));
alert('finished');
}
});
});
}
});
