30 JS progress bar with percentages

Hey all! Welcome to Codewithrandom. Today we’ll see how to make JS progress bars with percentages. Here we got the Latest Collection of Progress bars Examples and Source Code.

SVG Circle Progress

See the Pen <a href="https://codepen.io/JMChristensen/pen/AGbeEy" target="_blank" rel="noopener"> SVG Circle Progress</a> by Jon Christensen (<a href="https://codepen.io/JMChristensen" target="_blank" rel="noopener">@JMChristensen</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Jon Christensen
Demo And Download	Click Here For The Code
Language Used	HTML, CSS , JS
External Links\ Dependencies	Yes
Responsive	Yes

2. Animated Progress Bar w/ Jquery

See the Pen <a href="https://codepen.io/mustafa-a-aljasim/pen/oNbMNwG" target="_blank" rel="noopener"> Animated Progress Bar w/ Jquery </a> by Mustafa A. Aljasim (<a href="https://codepen.io/mustafa-a-aljasim" target="_blank" rel="noopener">@mustafa-a-aljasim</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Mustafa A. Aljasim
Demo And Download	Click Here For The Code
Language Used	HTML, CSS , JS
External Links\ Dependencies	Yes
Responsive	Yes

3. Pure CSS Radial Progress Bar

See the Pen <a href="https://codepen.io/Dreamdealer/pen/rNwwKp" target="_blank" rel="noopener"> Pure CSS Radial Progress Bar</a> by Johan van Tongeren (<a href="https://codepen.io/Dreamdealer" target="_blank" rel="noopener">@Dreamdealer</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Johan van Tongeren
Demo And Download	Click Here For The Code
Language Used	HTML, CSS(SCSS) , JS
External Links\ Dependencies	Yes
Responsive	Yes

4. Circular progress bars with canvas

See the Pen <a href="https://codepen.io/Adara/pen/MYyXgg" target="_blank" rel="noopener"> Circular progress bars with canvas</a> by Adara (<a href="https://codepen.io/Adara" target="_blank" rel="noopener">@Adara</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Adara
Demo And Download	Click Here For The Code
Language Used	HTML, CSS , JS
External Links\ Dependencies	Yes
Responsive	Yes

5. Untitled

See the Pen <a href="https://codepen.io/VPenkov/pen/yLWGbR" target="_blank" rel="noopener"> Untitled</a> by Vergil Penkov (<a href="https://codepen.io/VPenkov" target="_blank" rel="noopener">@VPenkov</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Vergil Penkov
Demo And Download	Click Here For The Code
Language Used	HTML, CSS ,JS
External Links\ Dependencies	Yes
Responsive	Yes

6. CSS3 Radial Progress Bar

See the Pen <a href="https://codepen.io/geedmo/pen/DggoNx" target="_blank" rel="noopener"> CSS3 Radial Progress Bar</a> by Geedmo (<a href="https://codepen.io/geedmo" target="_blank" rel="noopener">@geedmo</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Geedmo
Demo And Download	Click Here For The Code
Language Used	HTML, CSS(Sass)
External Links\ Dependencies	No
Responsive	Yes

7. Radial Progress Bars

See the Pen <a href="https://codepen.io/SalCriscione/pen/LGZjLG" target="_blank" rel="noopener"> Radial Progress Bars</a> by Sal Criscione (<a href="https://codepen.io/SalCriscione" target="_blank" rel="noopener">@SalCriscione</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Sal Criscione
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	No
Responsive	Yes

8. Radial Progressbar

See the Pen <a href="https://codepen.io/akzhy/pen/RROqPa" target="_blank" rel="noopener"> Radial Progressbar</a> by Akshay (<a href="https://codepen.io/akzhy" target="_blank" rel="noopener">@akzhy</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Akshay
Demo And Download	Click Here For The Code
Language Used	HTML, CSS , JS
External Links\ Dependencies	Yes
Responsive	Yes

9. Bentley Systems Progress Bar

See the Pen <a href="https://codepen.io/JonGraft/pen/YzqrGq" target="_blank" rel="noopener"> Bentley Systems Progress Bar</a> by Jon Graft (<a href="https://codepen.io/JonGraft" target="_blank" rel="noopener">@JonGraft</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Jon Graft
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	Yes
Responsive	Yes

10. CSS Skills Progress Bars

See the Pen <a href="https://codepen.io/ChiefDesignz/pen/WGpBoM" target="_blank" rel="noopener"> CSS Skills Progress Bars</a> by Chief (<a href="https://codepen.io/ChiefDesignz" target="_blank" rel="noopener">@ChiefDesignz</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Chief
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	No
Responsive	Yes

11. A circular progress bar

See the Pen <a href="https://codepen.io/frippz/pen/RgyqNg" target="_blank" rel="noopener"> A circular progress bar</a> by Fredrik Frodlund (<a href="https://codepen.io/frippz" target="_blank" rel="noopener">@frippz</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Fredrik Frodlund
Demo And Download	Click Here For The Code
Language Used	HTML, CSS , JS
External Links\ Dependencies	No
Responsive	Yes

12. Animating Bootstrap progress bars

See the Pen <a href="https://codepen.io/fluffyside/pen/MKjdad" target="_blank" rel="noopener"> Animating Bootstrap progress bars</a> by Paul Murphy (<a href="https://codepen.io/fluffyside" target="_blank" rel="noopener">@fluffyside</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Paul Murphy
Demo And Download	Click Here For The Code
Language Used	HTML, CSS ,JS
External Links\ Dependencies	Yes
Responsive	Yes

13. Untitled

See the Pen <a href="https://codepen.io/phillipalexander/pen/AVvZzv" target="_blank" rel="noopener"> Untitled</a> by Phillip Alexander (<a href="https://codepen.io/phillipalexander" target="_blank" rel="noopener">@phillipalexander</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Phillip Alexander
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	No
Responsive	Yes

14. CSS3 Radial Progress Bar

See the Pen <a href="https://codepen.io/pablinho/pen/WNevXp" target="_blank" rel="noopener"> CSS3 Radial Progress Bar</a> by Pablo (<a href="https://codepen.io/pablinho" target="_blank" rel="noopener">@pablinho</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Pablo
Demo And Download	Click Here For The Code
Language Used	HTML, CSS(Sass) , JS
External Links\ Dependencies	No
Responsive	Yes

15. Horizontal Bar Chart w/ Vanilla JS and CSS Grids

See the Pen <a href="https://codepen.io/alexitaylor/pen/OvNbXP" target="_blank" rel="noopener"> Horizontal Bar Chart w/ Vanilla JS and CSS Grids</a> by Alexi Taylor (<a href="https://codepen.io/alexitaylor" target="_blank" rel="noopener">@alexitaylor</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Alexi Taylor
Demo And Download	Click Here For The Code
Language Used	HTML, CSS ,JS
External Links\ Dependencies	Yes
Responsive	Yes

16. Arc Progress Bars

See the Pen <a href="https://codepen.io/willchapman/pen/DjxMgK" target="_blank" rel="noopener"> Arc Progress Bars</a> by Will Chapman (<a href="https://codepen.io/willchapman" target="_blank" rel="noopener">@willchapman</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Will Chapman
Demo And Download	Click Here For The Code
Language Used	JS
External Links\ Dependencies	Yes
Responsive	Yes

17. Material Design Progress Bars

See the Pen <a href="https://codepen.io/bootpen/pen/yeWRzK" target="_blank" rel="noopener"> Material Design Progress Bars</a> by Shahen Algoo (<a href="https://codepen.io/bootpen" target="_blank" rel="noopener">@bootpen</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Shahen Algoo
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	No
Responsive	Yes

18. Untitled

See the Pen <a href="https://codepen.io/ajbertra91/pen/gORPbM" target="_blank" rel="noopener"> Untitled</a> by Adam Bertrand (<a href="https://codepen.io/ajbertra91" target="_blank" rel="noopener">@ajbertra91</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Adam Bertrand
Demo And Download	Click Here For The Code
Language Used	HTML, CSS(Sass) , JS
External Links\ Dependencies	Yes
Responsive	Yes

19. Responsive progress bar with clip-path.

See the Pen <a href="https://codepen.io/eivinfu/pen/QeBbYa" target="_blank" rel="noopener"> Responsive progress bar with clip-path.</a> by Eivind (<a href="https://codepen.io/eivinfu" target="_blank" rel="noopener">@eivinfu</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Eivind
Demo And Download	Click Here For The Code
Language Used	HTML, CSS ,JS
External Links\ Dependencies	No
Responsive	Yes

20. Time Progress Bars

See the Pen <a href="https://codepen.io/andredarcie/pen/WmZWBO" target="_blank" rel="noopener"> Time Progress Bars</a> by André N. Darcie (<a href="https://codepen.io/andredarcie" target="_blank" rel="noopener">@andredarcie</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	André N. Darcie
Demo And Download	Click Here For The Code
Language Used	HTML, CSS , JS
External Links\ Dependencies	No
Responsive	Yes

21. Animated Progress Bars with Arrows

See the Pen <a href="https://codepen.io/kmonterrubio/pen/QKrJaL" target="_blank" rel="noopener"> Animated Progress Bars with Arrows</a> by Kimberly Monterrubio (<a href="https://codepen.io/kmonterrubio" target="_blank" rel="noopener">@kmonterrubio</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Kimberly Monterrubio
Demo And Download	Click Here For The Code
Language Used	HTML, CSS , JS
External Links\ Dependencies	Yes
Responsive	Yes

22. progressbar

See the Pen <a href="https://codepen.io/Metty/pen/kybeGv" target="_blank" rel="noopener"> progressbar</a> by Metty (<a href="https://codepen.io/Metty" target="_blank" rel="noopener">@Metty</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Metty
Demo And Download	Click Here For The Code
Language Used	HTML, CSS , JS
External Links\ Dependencies	Yes
Responsive	Yes

23. Circular Progress Bars

See the Pen <a href="https://codepen.io/InostrozaJ/pen/KOozbY" target="_blank" rel="noopener"> Circular Progress Bars</a> by InosCruz (<a href="https://codepen.io/InostrozaJ" target="_blank" rel="noopener">@InostrozaJ</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	InosCruz
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	No
Responsive	Yes

24. Circular progress bars with Single Canvas

See the Pen <a href="https://codepen.io/rahulkumarsobh/pen/pEdrjq" target="_blank" rel="noopener"> Circular progress bars with Single Canvas </a> by Rahul Prasad Mehta (<a href="https://codepen.io/rahulkumarsobh" target="_blank" rel="noopener">@rahulkumarsobh</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Rahul Prasad Mehta
Demo And Download	Click Here For The Code
Language Used	HTML, CSS , JS
External Links\ Dependencies	No
Responsive	Yes

25. HTML5 Progress Bars with CSS3

See the Pen <a href="https://codepen.io/parveenkaushik/pen/GpbrQp" target="_blank" rel="noopener"> HTML5 Progress Bars with CSS3</a> by Parveen Kaushik (<a href="https://codepen.io/parveenkaushik" target="_blank" rel="noopener">@parveenkaushik</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Parveen Kaushik
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	No
Responsive	Yes

26. Progress bar Demo

See the Pen <a href="https://codepen.io/souvik87/pen/proJPJ" target="_blank" rel="noopener"> Progress bar Demo</a> by souvik (<a href="https://codepen.io/souvik87" target="_blank" rel="noopener">@souvik87</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	souvik
Demo And Download	Click Here For The Code
Language Used	HTML, CSS , JS
External Links\ Dependencies	Yes
Responsive	Yes

27. Groovy Bars

See the Pen <a href="https://codepen.io/Grimmstar/pen/PygNgR" target="_blank" rel="noopener"> Groovy Bars</a> by Cyriina (<a href="https://codepen.io/Grimmstar" target="_blank" rel="noopener">@Grimmstar</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Cyriina
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	Yes
Responsive	Yes

28. Cool Skills Progress Bars

See the Pen <a href="https://codepen.io/steve_walson/pen/QWOdOad" target="_blank" rel="noopener"> Cool Skills Progress Bars</a> by Steve Walson (<a href="https://codepen.io/steve_walson" target="_blank" rel="noopener">@steve_walson</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Steve Walson
Demo And Download	Click Here For The Code
Language Used	HTML, CSS , JS
External Links\ Dependencies	No
Responsive	Yes

29. Colorful Progress Bars

See the Pen <a href="https://codepen.io/MegaCrafterJ/pen/XWKBMjK" target="_blank" rel="noopener"> Colorful Progress Bars</a> by MegaCrafter (<a href="https://codepen.io/MegaCrafterJ" target="_blank" rel="noopener">@MegaCrafterJ</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	MegaCrafter
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	No
Responsive	Yes

30. Progress D3 bar

See the Pen <a href="https://codepen.io/HectorLeon/pen/LZvYbG" target="_blank" rel="noopener"> Progress D3 bar</a> by Héctor (<a href="https://codepen.io/HectorLeon" target="_blank" rel="noopener">@HectorLeon</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Héctor
Demo And Download	Click Here For The Code
Language Used	HTML, CSS(SCSS) , JS
External Links\ Dependencies	Yes
Responsive	Yes

So Learners that’s all. We have included 30 creative javascript progress bars in this article. I hope you enjoyed reading this. Tell your other developers about this. We would love to hear your opinions and suggestions in the comments section below.

Check out our other posts on codewithrandom to learn more about front-end development.

Thank you

You Might Also Like

Number Trivia App using HTML, CSS & JavaScript

Build a Maze Game Using JavaScript (Source Code)

Range Slider Using HTML ,CSS & Java Script