in CSS3

Progress Bar with CSS3

In almost all the web or mobile applications, we have seen progress bar used. Progress bar 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 progress bar. So a progress bar is very usefull when we develop web or mobile applications.So, we will see how to create a progress bar with css3.

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

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 for Progress Bar

.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 progress bar is ready with the css3 added. 


Animated Progress Bar

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 progress.

Jquery for animating progress bar

$(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;
	});
});

View the Demo

Hover effect with CSS3

How to make the progress bar stylish?

We have seen how to make simple progress bar with simple css. We will add some styles for making the progress-bar to 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 progress-bar looking awesome and ‘wow’ your website visitors!

Related Posts

Written By:

Add a Comment

Your email address will not be published. Required fields are marked *