16 CSS Progress Bars

568 阅读2分钟
原文链接: freefrontend.com

16 CSS Progress Bars

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

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

Author

  • Jenning

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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