December 11, 2018

16 CSS Progress Bars

Collection of hand-picked free HTML and CSS progress bar code examples.

Related Articles:

1. jQuery Progress Bars

Author

• Jenning
• November 22, 2018

Links

• demo and code

Made with

• HTML (Pug) / CSS (Sass)

About the code

Progress Bar Pure CSS

Interactive progress bar pure CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Author

• Eva Wythien
• November 1, 2018

Links

• demo and code

Made with

• HTML / CSS (SCSS)

About the code

Animation Progress Bars

Progress bars with CSS animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Author

• Lucagez
• October 18, 2018

Links

• demo and code
• github page
• svg patterns

Made with

• HTML / CSS / JavaScript

About the code

CSS Progress Bars

CSS progress bars made with svg patterns.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Author

• Cassidy Williams
• September 13, 2018

Links

• demo and code

Made with

• HTML / CSS / JavaScript

About the code

Stepped Progress Bar

Stepped progress bar with little JS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Author

• Mike Aparicio
• September 12, 2018

Links

• demo and code

Made with

• HTML / CSS

About the code

Progress Bar

HTML and CSS progress bar.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Author

• Ricardo Prieto
• December 10, 2017

Links

• demo and code
• tutorial

Made with

• HTML / CSS

About the code

Reading Progess Bar CSS Only

Experiment with a new value for the CSS position property to create a progress bar reading the articles without the need of using PHP or JavaScript, just HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Author

• Antoinette Janus
• June 27, 2017

Links

• demo and code
• dribbble page

Made with

• HTML / CSS (SCSS) / JavaScript

About the code

Loading Bar

Pretty HTML, CSS and JS loading bar with gif image.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Author

• Antoinette Janus
• April 6, 2016

Links

• demo and code

Made with

• HTML / CSS (SCSS)

About the code

Rainbow Progress Bar

Pure CSS and HTML progress bar, using the repeating-linear-gradient.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Author

• Constantine
• November 24, 2015

Links

• demo and code

Made with

• HTML (Pug) / CSS (Stylus)

About the code

Light Progress Bar

HTML and CSS animated light progress bar.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Author

• Rafael González
• August 16, 2015

Links

• demo and code

Made with

• HTML / CSS (SCSS)

About the code

Pure CSS Progress Bar

Pure CSS progress, a pretty liquid progress bar.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Author

• Artboard Artisan
• June 15, 2015

Links

• demo and code

Made with

• HTML / CSS (SCSS)

About the code

Loading Bar

A quick and simple loading bar that provides the illusion of a working progress bar.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Author

• Eric Gregoire
• December 31, 2014

Links

• demo and code

Made with

• HTML / CSS / JavaScript

About the code

Expanding Loader

A thin loading bar that expands once it hits 100%.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Author

• Ben Anderson
• March 1, 2014

Links

• demo and code

Made with

• HTML / CSS

About the code

Orb Progress Bar

Progress bar made only with HTML and CSS animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Author

• Kevin Sweeney
• October 19, 2013

Links

• demo and code

Made with

• HTML / CSS (SCSS)

About the code

Progress Bars

Static progress bar vs. progress bar with opposing animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Author

• Aleks
• May 14, 2013

Links

• demo and code
• dribbble page

Made with

• HTML / CSS

About the code

Pixelated Progress Bar

Pure CSS progress bar.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Author

• Thibaut
• January 22, 2013

Links

• demo and code

Made with

• HTML / CSS

About the code

Animated Progress Bar

Simple animated progress bar in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -