Progress Bar with CSS3

In almost all the web or mobile applications, we have seen progress bar used. It is used to show the current completion state of a process. For example, When we have to show 4 steps of registration to a job portal, we can use the progression bar with the percentage of completion . So a progress bar is very useful when we develop web or mobile applications. So, we will see how to create one with simple css3 code.

Progress bar with CSS3

How to create a simple progress bar?

Here we will see, how to create a simple progress bar with less HTML and few lines of CSS.

HTML Mark up

Very minimal HTML usage is a good practice. We will use only two elements for creating our example. Following is the HTML.

	
<div class="progress-wrap">
     <span class="progress-bar"></span>
</div>

We have added a div with a class ‘progress-wrap’. This is showing the full length or the 100%. and the span is to show the percentage of completion. HTML is ready; now let’s style the html elements.

CSS Structure

.progress-wrap {
            border: 1px solid #dcdcdc;
            background: #f3f3f3;
            overflow: hidden;
            border-radius: 10px;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            box-shadow: 1px 1px 1px #777;
            -moz-box-shadow: 1px 1px 1px #777;
            -webkit-box-shadow: 1px 1px 1px #777;
        }
    .progress-bar {
        display: block;
        height: 20px;
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
    }

    .progress-bar {
        background-color: #b7d969;
    }

  Our progression bar is ready with the css3 added.

Animated Progress Bar

Animated progress in our web page will be more appealing to the users whoever visits our site. Rather than static, animations on the web pages will give a good impression to the user, Now let us see how to make the the bar animated. We will add few lines of jquery to animate the progress-bar which is showing the current percentage of completion.

Jquery for animating

$(document).ready( function() {
	var delay = 0;
	$('.progress-wrap').find('.progress-bar').each( function() {
		var num = Math.floor(Math.random()*8)+2;
		$(this)
		.width(0)
		.delay(delay)
		.animate({
			'width': (num*10)+'%'
		}, 3000);
		delay += 1500;
	});
});

A few lines of jQuery is added to animate it.

View the Demo

Hover effect with CSS3

How to make a stylish progress bar?

We have seen how to make simple progression bar with simple css. We will add some styles to make it look stylish. Here is an example with gradient color for the bar.

.gradient .progress-bar {
        box-shadow: 
            0 5px 5px rgba(255,255,255,0.6) inset, 
            0 -5px 7px rgba(0, 0, 0, 0.4) inset;
        -moz-box-shadow: 
            0 5px 5px rgba(255,255,255,0.6) inset, 
            0 -5px 7px rgba(0, 0, 0, 0.4) inset;
        -webkit-box-shadow: 
            0 5px 5px rgba(255,255,255,0.6) inset, 
            0 -5px 7px rgba(0, 0, 0, 0.4) inset;
        filter: progid:DXImageTransform.Microsoft.gradient( 
            startColorstr='#33ffffff', 
            endColorstr='#33000000',
            GradientType=0 );
    }

Now we have seen two examples in this tutorial. Let us try to add more styles and make the progression bar looking awesome and ‘wow’ your website visitors! 

You may also look into the article on step by step progress display 

label, , , , , , , , , , , ,

About the author