How to create a progress bar with CSS3

I wouldn’t be wrong if I say that CSS3 has revolutionized the web design trend. It has made possible certain things which we had to do via Flash or JavaScript. Using CSS3, it is possible to create dynamic, scalable web components that work on most modern browsers.

Among the things that CSS3 has made easier, progress bar is a special one. Progress bars are seen everywhere these days. You will find them in portfolio sites, file download or upload screen, connection screens and in lots of other places. If you have always wanted to create a CSS3 progress bar on your own, today is your lucky day. In today’s tutorial, I will show you how to create a simple, nice progress bar with CSS3. After reading this tutorial, you will be able to create a CSS3 progress bar easily.

We will start with the HTML part. I will skip the other parts of the HTML and will concentrate only on the part where the action will take place. The HTML for the progress bar will look like this :

<div class="progress_bar_bg">
   <div class="progress_bar">
      <div class="progress_bar_animation"></div>
    </div>
</div>

If you save the file and load it in a browser, that won’t do anything yet, because we haven’t provided any content or applied any style to it. Let’s do that now.

First, we will create a black background for our progress bar. This will act a separate section. We will use border-radius and box-shadow to make it look nice. Add the following code to your CSS file –

.progress_bar_bg {
   background:#282828;
   width:90%;
   height:15px;
   border:10px solid #282828;
   border-radius: 20px;
   box-shadow: 0px 5px 17px rgba(40, 40, 40, 0.5);
}

This will create a section with black background like this :

Now, let’s create the actual background for our progress bar. I will use a gradient as the background, but you can use a solid color or an image as the background. Add the following code to your CSS file :

.progress_bar {
   background: #c5deea;
   width:60%;
   height:30px;
   height: 15px;
   border-radius: 12px;
   background: -moz-linear-gradient(top, #c5deea 0%, #066dab 100%);
   background: -webkit-linear-gradient(top, #c5deea 0%,#066dab 100%);
   background: -o-linear-gradient(top, #c5deea 0%,#066dab 100%);
   background: -ms-linear-gradient(top, #c5deea 0%,#066dab 100%);
   background: linear-gradient(to bottom, #c5deea 0%,#066dab 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#c5deea′, endColorstr=’#066dab′,GradientType=0 );
}

After reloading the file, you should see a screen like this :

Okay, we have created a section and the background for our progress bar. Here comes the fun part of the process. Now we will create a linear pattern by using gradients and animate them with @keyframes.

Add the following code to your CSS file –

@-webkit-keyframes progress {
    to {background-position: 30px 0;}
}

@-moz-keyframes progress {
    to {background-position: 30px 0;}
}

@keyframes progress {
   to {background-position: 30px 0;}
}

.progress_bar_animation {
   width: 100%;
   height: 15px;
   border-radius: 20px;
   -webkit-animation: progress 1s linear infinite;
   -moz-animation: progress 1s linear infinite;
   animation: progress 1s linear infinite;
   background-repeat: repeat-x;
   background-size: 30px 30px;
   background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
   background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);

}

That’s it. If you reload your browser now, you will see a nice progress bar like the following :

If you look at the CSS of the progress_bar_animation class, you will see that we created the animation with ‘animation: progress 1s linear infinite;’. This animation plays on the 30px gradient tile, which is defined through @keyframes. If you want to limit the animation to a certain portion of the background, you can do that by adjusting the width of progress_bar_animation class. And if you want a wider or taller animation, that is possible too.

An awesome feature of our progress bar is all of its widths are defined in percentage values. Therefore, the progress bar will work in any screen size. With some creativity, you can easily use this example to create timeline, graph or anything else you can think of.

While this was a pretty basic example of CSS3 progress bars, there are all sorts of possibilities to enhance it further. But as there are unlimited possibilities, I will limit this article to the basics only. For a more comprehensive discussion on CSS3 progress bars, check out this article in :