Collection of hand-picked free HTML and CSS progress bar code examples. Update of December 2018 collection. 2 new items.

Related Articles:

  1. JavaScript Progress Bars
  2. jQuery Progress Bars
  3. React Progress Bars
  4. Vue Progress Bars

Author

  • Traf

Links

Made with

  • HTML / CSS

About a code

Simple Progress Bar

Simple CSS progress bar with animation.

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

Responsive: yes

Dependencies: -

Author

  • Tobias Glaus

Links

Made with

  • HTML / CSS (SCSS)

About a code

Only CSS Loading Animation

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

Responsive: yes

Dependencies: font-awesome.css

Demo image: Progress Bar Pure CSS Progress Bar Pure CSS - GIF Demo

Author

  • Jenning

Links

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: -

Demo image: Animation Progress Bars Animation Progress Bars - GIF Demo

Author

  • Eva Wythien

Links

Made with

  • HTML / CSS (SCSS)

About the code

Animation Progress Bars

Progress bars with CSS animation.

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

Dependencies: -

Demo image: CSS Progress Bars CSS Progress Bars - GIF Demo

Author

  • Lucagez

Links

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: -

Demo image: Stepped Progress Bar Stepped Progress Bar - GIF Demo

Author

  • Cassidy Williams

Links

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: -

Demo image: Progress Bar

Author

  • Mike Aparicio

Links

Made with

  • HTML / CSS

About the code

Progress Bar

HTML and CSS progress bar.

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

Dependencies: -

Demo image: Reading Progess Bar CSS Only

Author

  • Ricardo Prieto

Links

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: -

Demo image: Loading Bar Loading Bar - GIF Demo

Author

  • Antoinette Janus

Links

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: -

Demo image: Rainbow Progress Bar Rainbow Progress Bar - GIF Demo

Author

  • Antoinette Janus

Links

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: -

Demo image: Light Progress Bar Light Progress Bar - GIF Demo

Author

  • Constantine

Links

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: -

Demo image: Pure CSS Progress Bar Pure CSS Progress Bar - GIF Demo

Author

  • Rafael González

Links

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: -

Demo image: Loading Bar Loading Bar - GIF Demo

Author

  • Artboard Artisan

Links

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: -

Demo image: Expanding Loader

Author

  • Eric Gregoire

Links

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: -

Demo image: Orb Progress Bar Orb Progress Bar - GIF Demo

Author

  • Ben Anderson

Links

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: -

Demo image: Progress Bars Progress Bars - GIF Demo

Author

  • Kevin Sweeney

Links

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: -

Demo image: Pixelated Progress Bar Pixelated Progress Bar - GIF Demo

Author

  • Aleks

Links

Made with

  • HTML / CSS

About the code

Pixelated Progress Bar

Pure CSS progress bar.

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

Dependencies: -

Demo image: Animated Progress Bar Animated Progress Bar - GIF Demo

Author

  • Thibaut

Links

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: -