30+ JavaScript Progress Bars - Free Code + Demos

Collection of 30+ JavaScript Progress Bars. All items are 100% free and open-source.

NEW 🔥 Auto-Apply to 100's of Jobs With AI 🔥
👉 Click to visit: ApplyFox.ai

1. Radial Progress Bars

JavaScript Progress Bars - Radial Progress Bars
Scrolling each svg into the window will activate the progress bar. IE11 friendly.
Author: Erin E. Sullivan (erinesullivan)
Created on: March 29, 2018
Made with: HTML, CSS, JS
Tags: radial, progress, jquery, infographic, animate

2. Custom Progress Bar

JavaScript Progress Bars - Custom Progress Bar
Author: Florin Pop (FlorinPop17)
Created on: January 2, 2020
Made with: HTML, CSS, JS

4. Year Progress

JavaScript Progress Bars - Year progress
Author: Juani Gallo (juanigallo)
Created on: January 1, 2020
Made with: HTML, SCSS, Babel

5. Circle Progress

JavaScript Progress Bars - Circle progress
Circular progressbar using CircleProgress library. You can ⭐ the repo too . Other Circle Progress examples: https://tigrr.github.io/circle-progress/examples.html By the way, look at the CSS line 12. So cool you can do that, hah? 😎
Author: Tigran Sargsyan (tiggr)
Created on: October 4, 2019
Made with: HTML, SCSS, JS
Tags: progressbar, circle progress

6. Circle Progress Bar With Handle At The End

JavaScript Progress Bars - Circle progress bar with handle at the end
Author: Radley Sustaire (RadGH)
Created on: August 15, 2019
Made with: HTML, CSS, JS

7. Article Progress Bar / Custom Scroll Bar

JavaScript Progress Bars - Article Progress Bar / Custom Scroll Bar
Author: Kyle Wetton (kylewetton)
Created on: August 14, 2019
Made with: HTML, SCSS, JS
Tags: ui, blog, scroll, custom

8. Wraparound Progress Bar

JavaScript Progress Bars - Wraparound Progress Bar
A progress bar that wraps around the outside of the whole window instead of only at the top. Unfortunately this is dependent on jQuery because I could not get the elements to have 0% height/width dependent on scroll speed.
Author: Thomas Vaeth (thomasvaeth)
Created on: March 2, 2018
Made with: HTML, SCSS, Babel
Tags: progress, progress-bar, progressbar, javascript

9. Progress

JavaScript Progress Bars - Progress
What is progress but a sequence of points? Update: in its first version the project used the polyline element to draw the progress bar. For cross-browser support it has been refactored to use path elements instead. Simply put, Edge doesn't seem to understand the getTotalLength() method...
Read More
Author: Gabriele Corti (borntofrappe)
Created on: June 19, 2019
Made with: HTML, CSS, JS
Tags: svg, polyline, progress, anime

10. Responsive SVG Progress Bar With CSS Custom Properties For Settings

JavaScript Progress Bars - Responsive SVG Progress Bar with CSS Custom Properties for settings
My component for implementation of progress bar. I use CSS Custom Properties for settings of parameters such as size, color, unit e.t.c. The diagram is implemented via SVG. P.S: if you like my content maybe you will become a donator and donate some money? That helps me to create new aweso...
Read More
Author: Stas Melnikov (melnik909)
Created on: February 11, 2019
Made with: HTML, CSS, JS
Tags: svg, progress-bar, custom properties, ui, animation

11. Animated Progress Bar

JavaScript Progress Bars - Animated Progress Bar
By CSSFlow: free UI elements and widgets coded with HTML5, CSS3, and Sass. View the original article and download the Sass/SCSS source at: www.cssflow.com/snippets/animated-progress-bar Original PSD by Vin Thomas. Tested in Firefox 4, Safari 5.1, Chrome 13, Opera 10, IE 9 (and newer).
Author: Thibaut (Thibaut)
Created on: January 22, 2013
Made with: HTML, CSS
Tags: css3, pure-css, progress-bar, transition, loading

12. Animated Progress/skill Bars Collection

JavaScript Progress Bars - Animated progress/skill bars collection
CSS3 animated progress bars collection
Author: foxeisen (foxeisen)
Created on: November 25, 2018
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: progress, progress-bar, ui

13. 🙌 Multiple Interactive Progress Bar Elements

JavaScript Progress Bars - 🙌 Multiple interactive progress bar elements
A box with several progress bars which can be fulfilled by clicking the related button below.
Author: Ali Soueidan (lazercaveman)
Created on: October 1, 2018
Made with: Pug, Sass, JS
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: prograss-bar, animation, interaction

14. Responsive Animated Progress Bar To Donut

JavaScript Progress Bars - Responsive animated progress bar to donut
Author: Mikael Ainalem (ainalem)
Made with: HTML, CSS, JS

15. The Depressing Loading Bar 🤹🏼‍♂️

JavaScript Progress Bars - 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.
Author: Ali Soueidan (lazercaveman)
Created on: June 21, 2018
Made with: Pug, Sass, JS
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: loading-bar, design, animation

16. Donut Progress Bar

JavaScript Progress Bars - Donut Progress Bar
Author: ErreC (Errec)
Created on: February 23, 2018
Made with: HTML, Sass, JS

17. <progress> Bar Animation

JavaScript Progress Bars - <progress> bar animation
Author: Ana Tudor (thebabydino)
Created on: March 23, 2017
Made with: HTML, Stylus, Babel
Tags: stylus, progress, javascript

18. Progress Bar (Javascript)

JavaScript Progress Bars - Progress Bar (Javascript)
I was reading the CSS-trick's article about progress bar. I wanted to create an animated progress bar with only javascript and I'm using setInterval to increment the width element.
Author: Luis Francisco (luisfrancisco02)
Created on: September 14, 2018
Made with: HTML, Stylus, JS
Tags: setinterval, progress-bar, javascript

19. Pure Javascript And CSS Progress Bar

JavaScript Progress Bars - Pure javascript and CSS progress bar
Progress bar for slider using pure JavaScript and CSS3. Progresse bar size base on parent container width
Author: Richard Vacchino-Marceau (Bloodheaven)
Created on: December 11, 2015
Made with: HTML, SCSS, JS
Tags: javascript, css3, html5, progress-bar

20. ProgressBar.js

JavaScript Progress Bars - ProgressBar.js
Author: Benja.min (benjidawson)
Created on: December 20, 2015
Made with: HTML, CSS, JS

21. Loading Bar Flexible JavaScript Progress Bar Library (loadingbar.js)

22. Circular Progress Bar

JavaScript Progress Bars - Circular Progress Bar
Something I've been wanting to make for a long while, tested around with it but definitely needs cleaning up...
Author: Julia Lim (juliamlim)
Created on: October 8, 2015
Made with: HTML, CSS, JS

23. Multi-step Form With Progress Bar

JavaScript Progress Bars - Multi-step form with progress bar
Borrowed heavily from: http://thecodeplayer.com/walkthrough/jquery-multi-step-form-with-progress-bar
Author: Brendan Sparrow (brendansparrow)
Created on: November 24, 2015
Made with: HTML, Less, JS

24. Multi-step Form With Progress Bar

JavaScript Progress Bars - Multi-step form with progress bar
Borrowed heavily from: http://thecodeplayer.com/walkthrough/jquery-multi-step-form-with-progress-bar Forked from Brendan Sparrow's Pen Multi-step form with progress bar. Forked from Brendan Sparrow's Pen Multi-step form with progress bar.
Author: yous (y_s_f)
Created on: January 20, 2016
Made with: HTML, Less, JS

25. Article Progress Bar

JavaScript Progress Bars - Article Progress Bar
for MSU-DOE Plant Research Laboratory News stories: https://prl.natsci.msu.edu/news-events/news/ Using two approaches: - scroll listener method - Intersection observer method (default enabled)
Author: Igor Houwat (houwat)
Created on: August 10, 2020
Made with: HTML, SCSS, JS
Tags: css, js, progressbar

26. Untitled

JavaScript Progress Bars - Untitled
Forked from Shaman Tito's Pen mgeon.
Author: Shilpa G (baymax84)
Created on: August 4, 2015
Made with: HTML, CSS, JS

27. Progress Bar Pure JS

JavaScript Progress Bars - Progress Bar Pure JS
Author: Pistol (pistol)
Created on: May 22, 2019
Made with: Pug, Sass, JS
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
NEW 🔥 Auto-Apply to 100's of Jobs With AI 🔥
👉 Click to visit: ApplyFox.ai