Collection of hand-picked free vanilla JavaScript progress bar code examples. Update of January 2020 collection. 16 new items.
Related Articles:
- CSS Progress Bars
- Bootstrap Progress Bars
- jQuery Progress Bars
- React Progress Bars
- Tailwind Progress Bars
- Vue Progress Bars

Links
Made with
- HTML / CSS / JS
About a code
Scroll-Linked Animations: Progress Bar
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

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

Links
Made with
- HTML (Pug) / CSS (Stylus) / JS (Babel)
About a code
Styled Progress
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS / JS
About a code
CSS Scroll Effects
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Progress Bar
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
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: -
Links
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: -
Links
Made with
- HTML / CSS / JS
About a code
Circular Progress Bar
Compatible browsers: Chrome, Edge, Opera, Safari
Responsive: yes
Dependencies: -
Links
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: -
Links
Made with
- HTML / CSS / JS
About a code
Circular Progress Bar
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Progress Bar
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
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
Links
Made with
- HTML / CSS (SCSS) / JS (Babel)
About a code
Radial Animated Progress
Compatible browsers: Chrome, Edge, Opera, Safari
Responsive: yes
Dependencies: -
Links
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: -
Links
Made with
- HTML / CSS / JS
About a code
Fluid Meter Exaples
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS / JS
About a code
Custom Progress Bar
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
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: -
Links
Made with
- HTML / CSS / JS
About a code
Progress
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Circle Progress
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: circle-progress.js
Links
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: -
Links
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: -
Links
Made with
- HTML / CSS / JS
About a code
Progress Bar
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: anime.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Progress Bar
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Animated Progress Bar
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
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: -
Links
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
Links
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
Links
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: -
Links
Made with
- HTML / CSS (Sass) / JS
About a code
Donut Progress Bar
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: lodash.js
Links
Made with
- HTML / CSS (Stylus) / JS (Babel)
About a code
Progress Bar Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

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