Animated HTML Progress Bar CSS
In previous posts we talked about JSONp requests and doing drag and drop uploads. But with those tutorials, we didn’t look into making them look nice. Today we are going to create a simple all CSS animated progress bar.
The Resources
You will need a pattern image that is transparent or the same color as your loading bar. Below you can download the image I use for a lot of my loading bars since it’s transparent and just makes part of the background darker so it works on all colors.
The Code
Below is the HTML document we will be using. I am going to use an external CSS file called “style.css” and include it in the head of the HTML document.
<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css" />
<title>Loading Bar</title>
</head>
<body>
<div class="progressbar">
<div class="frame">
<div class="fill"></div>
</div>
<div class="percent">50%</div>
</div>
</body>
</html>
I added a few extra things such as a percent div that you can adjust with javascript when using this code. But for the style sheet, we need the following added to the document or to our style.css file.
.progressbar {
overflow: auto;
}
.progressbar .frame {
float: left;
width: 400px;
height: 15px;
border: 1px solid #bbbbbb;
padding: 1px;
background-color: #ffffff;
}
.progressbar .frame .fill {
background: #3297E7 url(progress.png) repeat top left;
width: 50%; /* Change this if the progress changes */
height: 100%;
animation: progressbar 1s linear 0 infinite normal; /* Supported Browsers */
-webkit-animation: progressbar 1s linear 0 infinite normal; /* Safari / Chrome */
-moz-animation: progressbar 1s linear 0 infinite normal; /* FF */
-o-animation: progressbar 1s linear 0 infinite normal; /* Opera */
transition: width 0.5s linear;
-webkit-transition: width 0.5s linear;
-moz-transition: width 0.5s linear;
-o-transition: width 0.5s linear;
}
.progressbar .percent {
float: left;
height: 19px; /* .frame height + border + padding */
line-height: 19px;
font-size: 12px;
margin-left: 5px;
}
@keyframes progressbar {
0% {background-position: 0px 0px;}
100% {background-position: 25px 0px;}
}
@-webkit-keyframes progressbar {
0% {background-position: 0px 0px;}
100% {background-position: 25px 0px;}
}
@-o-keyframes progressbar {
0% {background-position: 0px 0px;}
100% {background-position: 25px 0px;}
}
@-moz-keyframes progressbar {
0% {background-position: 0px 0px;}
100% {background-position: 25px 0px;}
}
In the CSS there are a few things you should note or know if you want to make modifications. The first thing is, in all the keyframe elements, the background-position-x should be the width of your pattern. In the image I provided, the width is 25px. If the width is different from the image you will notice “glitches” in your animation.
I included multiple prefixes for the animation property. Most of these
are not required but are still placed here just in case. I usually only
keep the -webkit- prefix along with the normal keyframes block and
properties.
The percent number in the HTML will not adjust automatically with the
width of the progress bar. This you will have to update using
JavaScript to set it’s new value whenever you advance the progress bar.
To make the progress bar advance, change the .fill width to it’s new
percent. The width of fill will animate by itself once the percent is
changed for that css class.