Collection of hand-picked free vanilla JavaScript progress bar code examples. Update of January 2020 collection. 16 new items.

Related Articles:

  1. CSS Progress Bars
  2. Bootstrap Progress Bars
  3. jQuery Progress Bars
  4. React Progress Bars
  5. Tailwind Progress Bars
  6. Vue Progress Bars
Demo image: Scroll-Linked Animations: Progress Bar

Author

  • Bramus

Made with

  • HTML / CSS / JS

About a code

Scroll-Linked Animations: Progress Bar

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

Responsive: yes

Dependencies: -

Demo image: ProgressCar with Custom CSS Properties

Author

  • Mustafa Enes

Made with

  • HTML / CSS / JS (Babel)

About a code

ProgressCar with Custom CSS Properties

An interesting way to show what custom CSS properties can do for us.

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

Responsive: yes

Dependencies: -

Author

  • Chris Coyier

Made with

  • HTML / CSS / JS

About a code

CSS Progress Bars

They should stretch fine to whatever the width of the container element is, or just set it. Also they should stretch fine to whatever height you give .meter.

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

Responsive: yes

Dependencies: jquery.js

Demo image: Styled Progress

Author

  • Jhey

Made with

  • HTML (Pug) / CSS (Stylus) / JS (Babel)

About a code

Styled Progress

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

Responsive: yes

Dependencies: -

Demo image: CSS Scroll Effects

Author

  • Carlos

Made with

  • HTML / CSS / JS

About a code

CSS Scroll Effects

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

Responsive: yes

Dependencies: -

Author

  • The Programming Expert

Made with

  • HTML / CSS / JS

About a code

Progress Bar

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

Responsive: yes

Dependencies: -

Author

  • Geoff Dusome

Made with

  • HTML / CSS (SCSS) / JS

About a code

Scrolling Progress Bars with CSS Variables

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

Responsive: yes

Dependencies: -

Author

  • Colin Espinas

Made with

  • HTML / CSS / JS

About a code

Vanilla Scroll Progress Bar/Indicator

Examples of simple vanilla scroll progress bar/indicators.

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

Responsive: yes

Dependencies: -

Author

  • Bilal.Rizwaan

Made with

  • HTML / CSS / JS

About a code

Circular Progress Bar

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Hilbert Kong

Made with

  • HTML / CSS / JS

About a code

Progress Bar Lite

A simple percentage bar asset with intuitive animation.

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

Responsive: yes

Dependencies: -

Author

  • mohsen alizadeh

Made with

  • HTML / CSS / JS

About a code

Circular Progress Bar

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

Responsive: no

Dependencies: -

Author

  • MarkCode7n

Made with

  • HTML / CSS / JS

About a code

Progress Bar

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

Responsive: no

Dependencies: -

Author

  • Takane Ichinose

Made with

  • HTML / CSS / JS

About a code

Upload Progress Animation Microinteraction with GSAP

On the first click, the shape of the button will become circle. Then, the button will become a progress bar, and a speech bubble above the progress bar will be shown. That speech bubble shows the percentage of the upload progress. The speech bubble will tilt when the progress starts. After the uploading is done, the button will turn into green colored circle, then the check mark will appear, pertaining that the upload is already done. After 5 seconds, the button will return into its normal state.

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

Responsive: no

Dependencies: gsap.js

Author

  • Ana Tudor

Made with

  • HTML / CSS (SCSS) / JS (Babel)

About a code

Radial Animated Progress

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Ana Tudor

Made with

  • HTML / CSS (SCSS) / JS (Babel)

About a code

Progress Bars

Needs native conic-gradient() support and Houdini support to work (Experimental Web Platform features flag enabled). So at this point (January 2020), it's Chromium only.

Compatible browsers: Chrome, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Angel Arcoraci

Made with

  • HTML / CSS / JS

About a code

Fluid Meter Exaples

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

Responsive: no

Dependencies: -

Demo image: Custom Progress Bar

Author

  • Florin Pop

Made with

  • HTML / CSS / JS

About a code

Custom Progress Bar

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

Responsive: no

Dependencies: -

Author

  • Aaron Iker

Made with

  • HTML / CSS (SCSS) / JS

About a code

3D Progress Bar

3D progress bar in vanilla JavaScript.

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

Responsive: no

Dependencies: -

Author

  • Valentin

Made with

  • HTML / CSS / JS

About a code

Progress

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

Responsive: yes

Dependencies: -

Author

  • Tigran Sargsyan

Made with

  • HTML / CSS (SCSS) / JS

About a code

Circle Progress

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

Responsive: no

Dependencies: circle-progress.js

Author

  • Radley Sustaire

Made with

  • HTML / CSS / JS

About a code

Circle Progress Bar

Circle progress bar with handle at the end.

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

Responsive: no

Dependencies: -

Author

  • Kyle Wetton

Made with

  • HTML / CSS (SCSS) / JS

About a code

Article Progress Bar

Scroll to see article progress bar.

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

Responsive: yes

Dependencies: -

Author

  • Gabriele Corti

Made with

  • HTML / CSS / JS

About a code

Progress Bar

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

Responsive: no

Dependencies: anime.js

Author

  • Yusuke Saio

Made with

  • HTML / CSS (SCSS) / JS

About a code

Progress Bar

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

Responsive: yes

Dependencies: -

Author

  • Pierre Vion

Made with

  • HTML / CSS (SCSS) / JS

About a code

Animated Progress Bar

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

Responsive: yes

Dependencies: -

Author

  • foxeisen

Made with

  • HTML (Pug) / CSS (SCSS) / JS

About a code

Animated progress/skill bars collection.

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

Responsive: no

Dependencies: -

Author

  • Ali Soueidan

Made with

  • HTML (Pug) / CSS (Sass) / JS

About a code

Multiple Interactive Progress Bar Elements

A box with several progress bars which can be fulfilled by clicking the related button below.

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

Responsive: yes

Dependencies: font-awesome.css

Author

  • Mikael Ainalem

Made with

  • HTML / CSS / JS

About a code

Responsive Animated Progress Bar To Donut

One should be wary combining different animations. However in some cases it might. In this demo there are two animation working together when changing screen sizes.

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

Responsive: yes

Dependencies: nter-ui.css

Author

  • Ali Soueidan

Made with

  • HTML (Pug) / CSS (Sass) / JS

About a code

The Depressing Loading Bar

Just a fun project which is a loading bar which is resetting it self to default shortly before the loading progress is completed.

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

Responsive: yes

Dependencies: -

Author

  • ErreC

Made with

  • HTML / CSS (Sass) / JS

About a code

Donut Progress Bar

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

Responsive: no

Dependencies: lodash.js

Author

  • Ana Tudor

Made with

  • HTML / CSS (Stylus) / JS (Babel)

About a code

Progress Bar Animation

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

Responsive: no

Dependencies: -

Demo image: Mobile-Friendly Reading Progress with Ainimal JS

Author

  • Explosion AI

Made with

  • HTML (Pug) / CSS (Sass) / JS

About a code

Mobile-Friendly Reading Progress with Ainimal JS

Show reading progress indicator at the top of blog posts. Uses the HTML5 progress element and only minimal JavaScript.

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

Responsive: yes

Dependencies: -