You’ve seen progress bars everywhere, they are those bars that display the current completion state for a process, such as a download or a 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.
The progress bar markup
The markup could not be simpler than that:
.progress-bar- defines the general styles for our progress bar.
.blue- in this case, the
.blueCSS class adds a blue style for the progress bar.
.stripes- animation type for the current progress bar.
span- this will help you fill the progress bar. An inline set
widthwill help you specify the
The progress bar CSS
General styles for the CSS3 progress bar and filled area:
Let’s add some color and gradients:
CSS gradient stripes
You may have seen this CSS3 technique before, I just adapted it a little for this example:
Not sure if this is the best name I could find for this CSS3 animation, but here we go:
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 better support for that.
CSS3 keyframes animation based on box-shadow property:
Hey, what about older browsers?
The progress bars look pretty well thanks to graceful degradation.
width value for these progress bars.
I hope you liked this tutorial, please feel free to share your thoughts. Thanks for reading!
I just added some jQuery to the demo page. So, now you can also play with progress bars’ values.