51+ CSS Progress Bars

CSS progress bars are an effective tool for enhancing the user experience while at the same time providing real-time feedback about the status of ongoing processes.

In this collection, we are featuring 51+ HTML and CSS progress bar examples. We’ve sourced these progress bar code examples from reliable platforms like CodePen and GitHub.

Whether it’s downloading a file, installing software, or completing a form, each item in our collection gives you the creative edge to build visually stunning user interface elements with the upper hand to improve the user experience at the micro level.

Our collection offers a wide range of progress bars; each item has an eye-catching style, ranging from simple, linear bars to advanced designs with soothing animations and gradients. You can easily customize them to match the overall aesthetic of your application or website.

Let’s look at these 100% free, visually appealing CSS progress bars to keep your users informed and engaged.

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)