Collection of hand-picked free HTML and CSS progress bar code examples. Update of January 2020 collection. 10 new items.
Related Articles:
- Bootstrap Progress Bars
- JavaScript Progress Bars
- jQuery Progress Bars
- React Progress Bars
- Vue Progress Bars
Links
Made with
- HTML / CSS
About a code
Progress
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Purple Progress Bar
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Pixel Progress Bar
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Color Changing Loading Progress Bar
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
SVG Circle Progress Bar
Compatible browsers: Chrome, Edge, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS
About a code
SVG Circle Progress Bar
Compatible browsers: Chrome, Edge, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (PostCSS)
About a code
CSS Circular Progress
Circular progress indicator made using CSS conic-gradient
and custom properties.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (Sass)
About a code
Github Goal Progress Bar
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Warning Bar
CSS animations, variables and gradients to create a scrolling warning bar.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Progress Scrollbar CSS Only
Compatible browsers: Chrome, Edge, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Simple Progress Bar
Simple CSS progress bar with animation.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Only CSS Loading Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css


Links
Made with
- HTML (Pug) / CSS (Sass)
About the code
Progress Bar Pure CSS
Interactive progress bar pure CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML / CSS (SCSS)
About the code
Animation Progress Bars
Progress bars with CSS animation
.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Made with
- HTML / CSS / JavaScript
About the code
CSS Progress Bars
CSS progress bars made with svg patterns.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML / CSS / JavaScript
About the code
Stepped Progress Bar
Stepped progress bar with little JS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -

Links
Made with
- HTML / CSS
About the code
Progress Bar
HTML and CSS progress bar.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -

Links
Made with
- HTML / CSS
About the code
Reading Progess Bar CSS Only
Experiment with a new value for the CSS position property to create a progress bar reading the articles without the need of using PHP or JavaScript, just HTML and CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML / CSS (SCSS) / JavaScript
About the code
Loading Bar
Pretty HTML, CSS and JS loading bar with gif image.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML / CSS (SCSS)
About the code
Rainbow Progress Bar
Pure CSS and HTML progress bar, using the repeating-linear-gradient
.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML (Pug) / CSS (Stylus)
About the code
Light Progress Bar
HTML and CSS animated light progress bar.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML / CSS (SCSS)
About the code
Pure CSS Progress Bar
Pure CSS progress, a pretty liquid progress bar.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML / CSS (SCSS)
About the code
Loading Bar
A quick and simple loading bar that provides the illusion of a working progress bar.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -

Links
Made with
- HTML / CSS / JavaScript
About the code
Expanding Loader
A thin loading bar that expands once it hits 100%.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML / CSS
About the code
Orb Progress Bar
Progress bar made only with HTML and CSS animation.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML / CSS (SCSS)
About the code
Progress Bars
Static progress bar vs. progress bar with opposing animation.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML / CSS
About the code
Pixelated Progress Bar
Pure CSS progress bar.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML / CSS
About the code
Animated Progress Bar
Simple animated progress bar in HTML and CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -