Stylish CSS3 progress bars

November 23, 2011 by Catalin Rosu - 38 comments

You’ve seen progress bars everywhere, they are those bars that display the current completion state for a process, such as a download or file transfer. Whether you’re building a desktop or a web application, at a certain point, you may need to use this UI element.

Having said that, in this article you’ll learn how to create stylish and animated progress bars using CSS3.

Stylish CSS3 progress bars preview

View demo

The HTML

The markup could not be simpler than that:

<div class="progress-bar blue stripes">
    <span style="width: 40%"></span>
</div>

.progress-bar – defines the general styles for our progress bar.
.blue – in this case, the blue CSS class add a blue style for the progress bar.
.stripes – animation type for the current progress bar.
span – this will help you filling the progress bar. An inline set width will help you specifying the “fill” state.

The CSS

General styles for the CSS3 progress bar and filled area:

.progress-bar {
	background-color: #1a1a1a;
	height: 25px;
	padding: 5px;
	width: 350px;
	margin: 50px 0;			
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
	-webkit-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
	box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;	          
}

.progress-bar span {
	display: inline-block;
	height: 100%;	
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
        -webkit-transition: width .4s ease-in-out;
        -moz-transition: width .4s ease-in-out;
        -ms-transition: width .4s ease-in-out;
        -o-transition: width .4s ease-in-out;
        transition: width .4s ease-in-out;    
}

Let’s add some color/gradients:

.blue span {
	background-color: #34c2e3;   
}

.orange span {
	  background-color: #fecf23;
	  background-image: -webkit-gradient(linear, left top, left bottom, from(#fecf23), to(#fd9215));
	  background-image: -webkit-linear-gradient(top, #fecf23, #fd9215);
	  background-image: -moz-linear-gradient(top, #fecf23, #fd9215);
	  background-image: -ms-linear-gradient(top, #fecf23, #fd9215);
	  background-image: -o-linear-gradient(top, #fecf23, #fd9215);
	  background-image: linear-gradient(top, #fecf23, #fd9215);  
}	

.green span {
	  background-color: #a5df41;
	  background-image: -webkit-gradient(linear, left top, left bottom, from(#a5df41), to(#4ca916));
	  background-image: -webkit-linear-gradient(top, #a5df41, #4ca916);
	  background-image: -moz-linear-gradient(top, #a5df41, #4ca916);
	  background-image: -ms-linear-gradient(top, #a5df41, #4ca916);
	  background-image: -o-linear-gradient(top, #a5df41, #4ca916);
	  background-image: linear-gradient(top, #a5df41, #4ca916);  
}

Stripes

You may have seen this CSS3 technique before, I just adapted it a little for this example:

.stripes span {
	-webkit-background-size: 30px 30px;
	-moz-background-size: 30px 30px;
	background-size: 30px 30px;			
	background-image: -webkit-gradient(linear, left top, right bottom,
						color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent),
						color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)),
						color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent),
						to(transparent));
	background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent);
	background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent);
	background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent);
	background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent);
	background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent);            
	
	-webkit-animation: animate-stripes 3s linear infinite;
	-moz-animation: animate-stripes 3s linear infinite;       		
}

@-webkit-keyframes animate-stripes { 
	0% {background-position: 0 0;} 100% {background-position: 60px 0;}
}

@-moz-keyframes animate-stripes {
	0% {background-position: 0 0;} 100% {background-position: 60px 0;}
}

Shine

Not sure if this is the best name I could find for this CSS3 animation, but here we go:

.shine span {
	position: relative;
}

.shine span::after {
	content: '';
	opacity: 0;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: #fff;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;			
	
	-webkit-animation: animate-shine 2s ease-out infinite;
	-moz-animation: animate-shine 2s ease-out infinite; 			
}

@-webkit-keyframes animate-shine { 
	0% {opacity: 0; width: 0;}
	50% {opacity: .5;}
	100% {opacity: 0; width: 95%;}
}


@-moz-keyframes animate-shine {
	0% {opacity: 0; width: 0;}
	50% {opacity: .5;}
	100% {opacity: 0; width: 95%;}
}

This CSS3 progress bar example uses an CSS3 ::after pseudo-element which animates. Currently, animating generated content with CSS3 is available only on latest Firefox browsers. I hope that soon it will be a wider support for that.

Glow

CSS3 keyframes animation based on box-shadow property:

.glow span {
	-moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;
	-webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;
	box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;
	
	-webkit-animation: animate-glow 1s ease-out infinite;
	-moz-animation: animate-glow 1s ease-out infinite; 			
}

@-webkit-keyframes animate-glow {
 0% { -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;} 
 50% { -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .3) inset, 0 -5px 5px rgba(255, 255, 255, .3) inset;} 
 100% { -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;}
 }

@-moz-keyframes animate-glow {
 0% { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;} 
 50% { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .3) inset, 0 -5px 5px rgba(255, 255, 255, .3) inset;} 
 100% { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;}
 }

View demo

Hey, what about older browsers?

The progress bars look pretty well thanks to graceful degradation.

That’s all!

For further web development, to achieve the result you wish for, you just need to play with JavaScript or jQuery to change the span‘s width value for these progress bars.

I hope you liked this tutorial, please feel free to share your thoughts. Thanks for reading!

Update

I just added some jQuery to the demo page. So, now you can also play with progress bars values. Hope you like it!

If you enjoyed this article, get updates via RSS or email (it's free).

38 thoughts on “Stylish CSS3 progress bars”

Eugen Oprea on November 23, 2011 at 10:43 said:

They look fabulous and I will definitely use one of your examples here in my next project.
Thanks for sharing them!
Reply ↓
technology on November 23, 2011 at 10:50 said:

Look very simple, thanks for the tuts bro..
Reply ↓
Antoine Turmel (GeekShadow) on November 23, 2011 at 23:10 said:

What about instead ? huh
https://developer.mozilla.org/en/HTML/Element/progress
Reply ↓
- Red on November 23, 2011 at 23:17 said:
  
  The HTML5 progress will be great. Though, for now, its inconsistency across browsers make me not to use it yet.
  Reply ↓
Dzinepress on November 24, 2011 at 07:16 said:

really useful as I’m learning new css3 techniques. thanks
Reply ↓
Webdesign Blog on November 24, 2011 at 10:33 said:

Very nice CSS3 tutorial Catalin and thx for sharing it!
Reply ↓
Red on November 24, 2011 at 15:58 said:

Thanks for your comments guys, I’m glad you liked my progress bars!
Reply ↓
Daniel Piechnick on November 25, 2011 at 09:10 said:

Now I just need to think of a reason to use a progress bar. :)
Daniel Piechnick
Reply ↓
- Red on November 25, 2011 at 09:42 said:
  
  Daniel, think about a web app tasks completion or a launching page. ;)
  Reply ↓
Créer un site internet on November 25, 2011 at 09:47 said:

The loading bar with the stripes is awesome :)
Thanks for sharing with us :)
I wait for your tutorial to implement jquery in it.
Julien
Reply ↓
- Red on November 25, 2011 at 11:36 said:
  
  Julien, I’m glad you liked it. Stay tuned, I think I’ll update soon this article!
  Reply ↓
Victor Noagbodji on November 30, 2011 at 16:12 said:

nice,
quick question, is it possible, using css, to make the bar color switch to another color at a given percentage?
Reply ↓
- Red on December 2, 2011 at 12:54 said:
  
  Victor, the answer is yes.
  For the above progress bars, besides the .shine one (whose CSS3 animation is applied on the :after pseudo-element) you can add other colors using the keyframes.
  Reply ↓
Rilwis on December 1, 2011 at 15:26 said:

Very nice progress bar and smart CSS3 code. Thanks for sharing.
Reply ↓
- Red on December 2, 2011 at 12:54 said:
  
  Thanks for your comment Rilwis.
  Reply ↓
Clain Dsilva on December 12, 2011 at 18:17 said:

Lovely Progress bars… I need to learn more about key frames in CSS3 and I believe there is a lot more things like this can be programmed in CSS3. I am happy to see CSS getting more technical… WOW..!!
Reply ↓
- Red on December 12, 2011 at 18:41 said:
  
  Hi Clain, nice to hear you like my tutorial. Thanks!
  Reply ↓
jacob on February 4, 2012 at 07:20 said:

Great Tutorial!
I am just confused by one part, and this might be because I am not as skilled as the other readers.
For the body section of the css you reference a url that starts like this “data:image/png;base64,…” What exactly are you doing here and how come it works on my system as well?
I am sure this is a novice question, so if anyone can point me to an article explaining what is happening here I would very much appreciate it.
Thanks for the awesome tutorials.
Reply ↓
- Red on February 4, 2012 at 17:31 said:
  
  Jacob, I’m glad you liked this tutorial and thank you for your kind words.
  Regarding your question, here’s a great online tool to convert images to base64: http://webcodertools.com/imagetobase64converter
  Also, you can read more here: http://en.wikipedia.org/wiki/Data_URI_scheme
  Reply ↓
Nathan on March 9, 2012 at 23:21 said:

So I have the bar working, but how can you tell the bar how much progress to show dynamically? Like in my php I have put if x > y
if ((($line['product_quantity'] – ((str_replace(“,”,”",$line['value']) + $line['product_quantity']) – $data[0]->like_count)) / $line['product_quantity'])*100 <= 5)
Reply ↓
- Red on March 9, 2012 at 23:24 said:
  
  In practice, you just need to set width dynamically for the .progress-bar span.
  Reply ↓
  - Mike Vail on December 24, 2012 at 03:16 said:
    
    Love the code work. Nicely done. Small question, I made the progress bar dynamic for a donation php module on a friend’s website. The only problem is that when I try center the bar in the module, it centers the green progress in the middle of the shaded bar area too. Is there anyway to left align the green progress area inside of the progress bar and still center the progress bar in the middle of the page? You can see it on the right side of this website: http://www.preytech.com. Thanks! for the code!
    Reply ↓
Mukesh on April 1, 2012 at 17:04 said:

superb designs :)
Love them ;)
Reply ↓
Gonzosh on April 13, 2012 at 16:17 said:

Awesome job Red !
Is it possible to set the “100 %” button in order to be redirected to another page once the progressbar reaches 100% ?
Thanks alot for your help !
Reply ↓
爱斯诺博客 on July 3, 2012 at 08:29 said:

beautiful
Reply ↓
Dan Aase on September 29, 2012 at 10:09 said:

This is really nice! I think I will use it in my next project to my polls at the sidebar =) Thanks!
Reply ↓
Bytza on November 3, 2012 at 18:58 said:

Thankyou for this great tutorial.
Is very usefoul.
Reply ↓
Hardeep Asrani on December 5, 2012 at 15:26 said:

Amazing….i’ll use it for sure…. :) Thanks man…!!
Reply ↓
Jason on January 18, 2013 at 19:08 said:

Fantastic tutorial – as always! One question I was hoping I could get help with. I’m actually going to use these as a gauge to indicate storage space. My question is this…is there a way to put text in the colored bar section (i.e., 12GB out of 15GB used) or something of the sort?
Thank you!!
Reply ↓
- Jason on January 18, 2013 at 19:09 said:
  
  Sorry – I guess I just thought of something. If the progress bar is very small (i.e., 5%), then the text I want to display wouldn’t fit. I guess it somehow needs to be on top of both the bar and the container so it would display regardless of the bar width?
  Reply ↓
  - Catalin Rosu on January 18, 2013 at 22:42 said:
    
    Or you could just use a simple CSS3 tooltip to show i.e. 12GB out of 15GB used.
    Reply ↓
Erick Ribeiro on January 19, 2013 at 03:07 said:

where do you find these “animate stripes” value? o.O
Reply ↓
thelearner on January 30, 2013 at 21:05 said:

Thank you for sharing !
Best Regards from Spain :)
Reply ↓
cn arabic on March 22, 2013 at 15:23 said:

Nice tutos i like them .. but the probleme is they did not work in the old browsers .. but i will try them in my site . thank you
Reply ↓
Felipe on April 7, 2013 at 21:37 said:

Please does any one help me, i tried for a holy day and i dont understand where i need change to progress bar change, i saw the js code but i really dont understand, i want to change just in css, can any one help me understand?
Reply ↓
Seji on April 29, 2013 at 04:10 said:

The progress bars look great! I am trying to use the first one on my site but unsure of how to change the spans width. I’m using JQuery and I thought this would do the trick but it doesn’t:
$(“span”).attr(“width”, “20%”);
Can anyone point me in the right direction with this? I’ve only been learning web development for a matter of weeks and I don’t understand why this doesn’t work. Perhaps this is just way out of my league for the moment.
Reply ↓
- Seji on April 29, 2013 at 04:14 said:
  
  Oh I just figured it out. I should have been using .css instead of .attr. Thanks for the article!
  Reply ↓
Karssten Dall on May 22, 2013 at 12:10 said:

How to make it responsive?
Reply ↓