51+ CSS Progress Bars

A mesmerizing collection of free and open-source 51+ HTML and CSS progress bar code examples.

1. Multi Step Form with Progress Bar using jQuery and CSS3

See the Pen <a href="https://codepen.io/atakan/pen/nPOZZR"> Multi Step Form with Progress Bar using jQuery and CSS3</a> by Atakan Goktepe (<a href="https://codepen.io/atakan">@atakan</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Atakan Goktepe
Source: Code / Demo
Created on: AUGUST 10, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

2. Pure CSS radial progress bar

See the Pen <a href="https://codepen.io/jo-asakura/pen/NWWrWj"> Pure CSS radial progress bar</a> by Alex Marinenko (<a href="https://codepen.io/jo-asakura">@jo-asakura</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Alex Marinenko
Source: Code / Demo
Created on: MARCH 1, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

3. Super Simple Progress Bar

See the Pen <a href="https://codepen.io/thathurtabit/pen/nXKJON"> Super Simple Progress Bar</a> by Stephen Fairbanks (<a href="https://codepen.io/thathurtabit">@thathurtabit</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Stephen Fairbanks
Source: Code / Demo
Created on: MARCH 22, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

4. Skillset using HTML5 progress bars with CSS3 animations

See the Pen <a href="https://codepen.io/pankajparashar/pen/DRPzWL"> Skillset using HTML5 progress bars with CSS3 animations</a> by Pankaj Parashar (<a href="https://codepen.io/pankajparashar">@pankajparashar</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Pankaj Parashar
Source: Code / Demo
Created on: JANUARY 2, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

5. Dynamic Bootstrap Progress Bar

See the Pen <a href="https://codepen.io/gustitammam/pen/RRXGdj"> Dynamic Bootstrap Progress Bar</a> by Gusti Tammam (<a href="https://codepen.io/gustitammam">@gustitammam</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Gusti Tammam
Source: Code / Demo
Created on: AUGUST 27, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

6. WebKit Progress Scrollbar

See the Pen <a href="https://codepen.io/mykt0ngc0/pen/oNXqJgx"> WebKit Progress Scrollbar [CSS only]</a> by Myk ﹡ (<a href="https://codepen.io/mykt0ngc0">@mykt0ngc0</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Myk
Source: Code / Demo
Created on: MARCH 14, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

7. Animated Skill Meter – CSS

See the Pen <a href="https://codepen.io/josetxu/pen/XWqMJpN"> Animated Skill Meter – CSS</a> by Josetxu (<a href="https://codepen.io/josetxu">@josetxu</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Josetxu @josetxu
Source: Code / Demo
Created on: SEPTEMBER 16, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

8. Glitchy Progress Display

See the Pen <a href="https://codepen.io/MyXoToD/pen/JjpLzQv"> Glitchy Progress Display</a> by Max (<a href="https://codepen.io/MyXoToD">@MyXoToD</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Max
Source: Code / Demo
Created on: MAY 31, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

9. Simple Progress Bar

See the Pen <a href="https://codepen.io/alvarotrigo/pen/vYeNpjj"> Simple Progress Bar</a> by Álvaro (<a href="https://codepen.io/alvarotrigo">@alvarotrigo</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Álvaro
Source: Code / Demo
Created on: DECEMBER 4, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

10. Bars

See the Pen <a href="https://codepen.io/lucagez/pen/ReMLVV"> Bars</a> by Lucagez (<a href="https://codepen.io/lucagez">@lucagez</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Lucagez
Source: Code / Demo
Created on: OCTOBER 18, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

11. Color Changing Loading Progress Bar

See the Pen <a href="https://codepen.io/hopefulcodegirl/pen/WNwmOQX"> Color Changing Loading Progress Bar</a> by rachelmckean (<a href="https://codepen.io/hopefulcodegirl">@hopefulcodegirl</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: rachelmckean
Source: Code / Demo
Created on: SEPTEMBER 26, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

12. Simple progress bar animation

See the Pen <a href="https://codepen.io/traf/pen/oKbaqQ"> Simple progress bar animation</a> by Traf (<a href="https://codepen.io/traf">@traf</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Traf
Source: Code / Demo
Created on: JULY 23, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

13. A pure CSS loading bar

See the Pen <a href="https://codepen.io/robinrendle/pen/wKqmbW"> A pure CSS loading bar</a> by Robin Rendle (<a href="https://codepen.io/robinrendle">@robinrendle</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Robin Rendle
Source: Code / Demo
Created on: OCTOBER 13, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

14. The Progress

See the Pen <a href="https://codepen.io/t_afif/pen/bGqEBgL"> The progress</a> by Temani Afif (<a href="https://codepen.io/t_afif">@t_afif</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Temani Afif
Source: Code / Demo
Created on: MAY 12, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

15. Expanding Loader

See the Pen <a href="https://codepen.io/Boogiesox/pen/MYbWrj"> Expanding Loader</a> by Eric Gregoire (<a href="https://codepen.io/Boogiesox">@Boogiesox</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Eric Gregoire
Source: Code / Demo
Created on: DECEMBER 31, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

16. Loading Animation

See the Pen <a href="https://codepen.io/tobiasglaus/pen/NedpxQ"> Only (S)CSS loading animation</a> by Tobias Glaus (<a href="https://codepen.io/tobiasglaus">@tobiasglaus</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: TOBIAS GLAUS
Source: Code / Demo
Created on: DECEMBER 20, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

17. SVG Circle Progress Bar

See the Pen <a href="https://codepen.io/Curlmuhi/pen/qBZRWby"> SVG Circle Progress Bar(2)</a> by Ekta maurya (<a href="https://codepen.io/Curlmuhi">@Curlmuhi</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ekta maurya
Source: Code / Demo
Created on: AUGUST 22, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

18. Progress Bar

See the Pen <a href="https://codepen.io/manz/pen/GRxJgZZ"> Progress Bar</a> by Manz (<a href="https://codepen.io/manz">@manz</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Manz
Source: Code / Demo
Created on: JULY 1, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript(Babel)

19. Progress Bar

See the Pen <a href="https://codepen.io/peruvianidol/pen/NLMvqO"> Progress Bar</a> by Mike Aparicio (<a href="https://codepen.io/peruvianidol">@peruvianidol</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mike Aparicio
Source: Code / Demo
Created on: SEPTEMBER 12, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

20. Static Progress Bar vs. Progress Bar with Opposing Animation

See the Pen <a href="https://codepen.io/restlessdesign/pen/AGGBOB"> Static Progress Bar vs. Progress Bar with Opposing Animation</a> by Kevin Sweeney (<a href="https://codepen.io/restlessdesign">@restlessdesign</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Kevin Sweeney
Source: Code / Demo
Created on: OCTOBER 20, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

21. Interactive Progress Bar Pure CSS

See the Pen <a href="https://codepen.io/jenning/pen/bQvqMm"> Interactive progress bar Pure CSS</a> by Jenning (<a href="https://codepen.io/jenning">@jenning</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jenning
Source: Code / Demo
Created on: NOVEMBER 22, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS (Sass)

22. Swiper Progress Bar

See the Pen <a href="https://codepen.io/alvarotrigo/pen/gOGaovd"> Swiper Progress Bar</a> by Álvaro (<a href="https://codepen.io/alvarotrigo">@alvarotrigo</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Álvaro
Source: Code / Demo
Created on: DECEMBER 4, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

23. Custom Properties Step Progress Indicator

See the Pen <a href="https://codepen.io/michellebarker/pen/poLoeRq"> Custom properties step progress indicator</a> by Michelle Barker (<a href="https://codepen.io/michellebarker">@michellebarker</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Michelle Barker
Source: Code / Demo
Created on: JUNE 28, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

24. Reading Progess Bar CSS only

See the Pen <a href="https://codepen.io/ricardpriet/pen/RjXdPa"> Reading Progess Bar CSS only</a> by Ricardo Prieto (<a href="https://codepen.io/ricardpriet">@ricardpriet</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ricardo Prieto
Source: Code / Demo
Created on: DECEMBER 10, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

25. CSS Circular Progress

See the Pen <a href="https://codepen.io/equinusocio/pen/OJMBpdK"> CSS Circular Progress</a> by Mattia Astorino (<a href="https://codepen.io/equinusocio">@equinusocio</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mattia Astorino
Source: Code / Demo
Created on: JULY 16, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(PostCSS), JavaScript

26. Progress

See the Pen <a href="https://codepen.io/bold02/pen/XWKMXNe"> progress</a> by Both (<a href="https://codepen.io/bold02">@bold02</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Both
Source: Code / Demo
Created on: OCTOBER 26, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

27. Progress Bar Animation

See the Pen <a href="https://codepen.io/evawythien/pen/jegRxN"> Progress bar animation</a> by Eva Wythien (<a href="https://codepen.io/evawythien">@evawythien</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Eva Wythien
Source: Code / Demo
Created on: NOVEMBER 1, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

28. Simple Progress Bar Component

See the Pen <a href="https://codepen.io/alvarotrigo/pen/dyVYJmJ"> simple progress bar component </a> by Álvaro (<a href="https://codepen.io/alvarotrigo">@alvarotrigo</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Álvaro
Source: Code / Demo
Created on: DECEMBER 4, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

29. Pixel Progress Bar

See the Pen <a href="https://codepen.io/rubenasanchez/pen/eYzOqNG"> Pixel Progress Bar</a> by Ruben A Sanchez (<a href="https://codepen.io/rubenasanchez">@rubenasanchez</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ruben A Sanchez
Source: Code / Demo
Created on: OCTOBER 7, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

30. Progress Bar Animation

See the Pen <a href="https://codepen.io/evawythien/pen/xxXyePG"> Progress bar animation 2</a> by Eva Wythien (<a href="https://codepen.io/evawythien">@evawythien</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Eva Wythien
Source: Code / Demo
Created on: JANUARY 11, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS (SCSS)

31. Loading Bar

See the Pen <a href="https://codepen.io/artboardartisan/pen/VLzKVN"> Loading Bar</a> by Artboard Artisan (<a href="https://codepen.io/artboardartisan">@artboardartisan</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Artboard Artisan
Source: Code / Demo
Created on: JUNE 15, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

32. Stepped Progress

See the Pen <a href="https://codepen.io/cassidoo/pen/wEXQaG"> Stepped Progress</a> by Cassidy (<a href="https://codepen.io/cassidoo">@cassidoo</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Cassidy
Source: Code / Demo
Created on: SEPTEMBER 14, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

33. Circular minimalist progressive bars

See the Pen <a href="https://codepen.io/alvarotrigo/pen/VwMvydQ"> Circular minimalist progressive bars</a> by Álvaro (<a href="https://codepen.io/alvarotrigo">@alvarotrigo</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Álvaro
Source: Code / Demo
Created on: DECEMBER 4, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

34. Pure CSS Progress

See the Pen <a href="https://codepen.io/rgg/pen/QbRyOq"> Pure CSS Progress</a> by Rafael González (<a href="https://codepen.io/rgg">@rgg</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Rafael González
Source: Code / Demo
Created on: AUGUST 17, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

35. Progress Bar on Scroll made with CSS/HTML/ JavaScript

See the Pen <a href="https://codepen.io/alvarotrigo/pen/LYzpemz"> Progress Bar on Scroll made with CSS/HTML/ JavaScript</a> by Álvaro (<a href="https://codepen.io/alvarotrigo">@alvarotrigo</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Álvaro
Source: Code / Demo
Created on: DECEMBER 4, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

36. Orb Progress Bar

See the Pen <a href="https://codepen.io/benjammin412/pen/oNNzXY"> Orb Progress Bar</a> by Ben Anderson (<a href="https://codepen.io/benjammin412">@benjammin412</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ben Anderson
Source: Code / Demo
Created on: MARCH 1, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

37. Purple Progress Bar

See the Pen <a href="https://codepen.io/jasper/pen/GRqgPLK"> Purple Progress Bar</a> by Jasper (<a href="https://codepen.io/jasper">@jasper</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jasper
Source: Code / Demo
Created on: OCTOBER 10, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

38. Progress Bars

See the Pen <a href="https://codepen.io/thebabydino/pen/wvqVEMW"> #codeVember #26/2021: progress bars</a> by Ana Tudor (<a href="https://codepen.io/thebabydino">@thebabydino</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ana Tudor
Source: Code / Demo
Created on: NOVEMBER 26, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

39. Pixelated Progress Bar

See the Pen <a href="https://codepen.io/achudars/pen/DWROKx"> Pixelated Progress Bar</a> by Aleksandrs Cudars (<a href="https://codepen.io/achudars">@achudars</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Aleksandrs Cudars
Source: Code / Demo
Created on: MAY 14, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

40. SVG Circle Progress Bar

See the Pen <a href="https://codepen.io/Curlmuhi/pen/YzqpmZe"> SVG Circle Progress Bar (1)</a> by Ekta maurya (<a href="https://codepen.io/Curlmuhi">@Curlmuhi</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ekta maurya
Source: Code / Demo
Created on: AUGUST 22, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

41. 3D Circular Progress Bar

See the Pen <a href="https://codepen.io/mortezasharifinia/pen/BaVZZeM"> 3D circular progress bar</a> by Morteza (<a href="https://codepen.io/mortezasharifinia">@mortezasharifinia</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Morteza
Source: Code / Demo
Created on: NOVEMBER 14, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

42. CSS-Only Animated Progress Bars

See the Pen <a href="https://codepen.io/brandonmcconnell/pen/RwpyZGo"> CSS-Only Animated Progress Bars</a> by Brandon McConnell (<a href="https://codepen.io/brandonmcconnell">@brandonmcconnell</a>) on <a href="https://codepen.io">CodePen</a>.

Author: Brandon McConnell
Source: Code / Demo
Created on: JUNE 5, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

43. Checkboxes Progress Bar with Pure CSS

See the Pen <a href="https://codepen.io/ruidovisual/pen/gjrgVd"> Checkboxes Progress Bar w/ pure CSS #CodepenChallenge</a> by Miguel (<a href="https://codepen.io/ruidovisual">@ruidovisual</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Miguel
Source: Code / Demo
Created on: JULY 16, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS (Sass)

44. Dynamic Progress Bar

See the Pen <a href="https://codepen.io/alvarotrigo/pen/BawoJOb"> Dynamic Progress Bar</a> by Álvaro (<a href="https://codepen.io/alvarotrigo">@alvarotrigo</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Álvaro
Source: Code / Demo
Created on: DECEMBER 4, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

45. Dribbble Recreation: Loading Bar

See the Pen <a href="https://codepen.io/internette/pen/KqyxjE"> Dribbble Recreation: Loading Bar</a> by Antoinette Janus (<a href="https://codepen.io/internette">@internette</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Antoinette Janus
Source: Code / Demo
Created on: JUNE 27, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

46. Circular Progress Bar with Single HTML Element and CSS

See the Pen <a href="https://codepen.io/alvaromontoro/pen/poWgdVV"> Circular progress bar with single HTML element and CSS</a> by Alvaro Montoro (<a href="https://codepen.io/alvaromontoro">@alvaromontoro</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Alvaro Montoro
Source: Code / Demo
Created on: DECEMBER 6, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

47. Animated Progress Bar

See the Pen <a href="https://codepen.io/Thibaut/pen/ApjaJW"> Animated Progress Bar</a> by Thibaut (<a href="https://codepen.io/Thibaut">@Thibaut</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Thibaut
Source: Code / Demo
Created on: JANUARY 23, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

48. Light Progress Bar

See the Pen <a href="https://codepen.io/fearOfCode/pen/EVzRvv"> light progress bar</a> by FEAR ØF CODE (<a href="https://codepen.io/fearOfCode">@fearOfCode</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: FEAR ØF CODE
Source: Code / Demo
Created on: NOVEMBER 25, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS (Stylus)

49. Rainbow Progress Bar

See the Pen <a href="https://codepen.io/internette/pen/QNOeLo"> Rainbow Progress Bar</a> by Antoinette Janus (<a href="https://codepen.io/internette">@internette</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Antoinette Janus
Source: Code / Demo
Created on: APRIL 6, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

50. Warning Bar

See the Pen <a href="https://codepen.io/mog13/pen/qBOEaZP"> Warning bar</a> by Morgan (<a href="https://codepen.io/mog13">@mog13</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Morgan
Source: Code / Demo
Created on: APRIL 10, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

51. Animated Progress Bar with Jquery

See the Pen <a href="https://codepen.io/alvarotrigo/pen/WNZQdyq"> Animated Progress Bar w/ Jquery </a> by Álvaro (<a href="https://codepen.io/alvarotrigo">@alvarotrigo</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Álvaro
Source: Code / Demo
Created on: DECEMBER 4, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)