39 CSS Progress Bars
Here is a list of some beautiful and creative CSS progress bars for you.
Pure CSS Progress
Dev: Rafael González
Pure CSS radial progress bar
Dev: Alex Marinenko
Skillset using HTML5 progress bars with CSS3 animations
Dev: Pankaj Parashar
Image Preloader Progress Bar
Dev: Derek Hill
CSS3 Radial Progress Bar
Dev: Geedmo
Animated Progress Bar
Dev: Thibaut
SVG Circle Progress
Dev: Jon Christensen
CSS progress bar with inverted colors
Dev: gediminas
CSS Progress Bar
CSS Progress Bar
Dev: Lennart Hase
Circular CSS Progress Bar
CSS 3D Loading bar
Donation Progress Bar
Dev: Stephen Emlund
Pixelated Progress Bar
Dev: Aleksandrs Cudars
CSS Bar Chart Using HTML5 Progress
Dev: Geoff Graham
Dev: Ychnightder-both
Purple Progress Bar
Dev: Jasper
3D Download Button w/ Meter Progress
Dev: Terence Devine
Loading Petal Spinner
Dev: Thomas Trinca
Progress bar animation
Dev: Eva Wythien
CSS 5 steps progress bar
Dev: alecs popa
Step Progress Bar
Dev: Grant Vinson
Light progress bar
Dev: FEAR ØF CODE
CSS 3 progress bar
Dev: Kitty Giraudel
Pixel Progress Bar
Dev: Ruben A Sanchez
Color Changing Loading Progress Bar
Dev: rachelmckean
SVG Circle Progress Bar
Dev: Ekta maurya
Warning bar
See the Pen Warning bar by Morgan (@mog13) on CodePen.
Dev: Morgan
CSS Circular Progress
Dev: Mattia Astorino
SVG Circle Progress Bar
Dev: Ekta maurya
Github goal progress bar
Dev: Andreas Storm
Simple progress bar animation
Interactive progress bar Pure CSS
Dev: Jenning
Progress bars
See the Pen Bars by Lucagez (@lucagez) on CodePen.
Dev: Lucagez
Reading Progress Bar CSS only
Dev: Ricardo Prieto
Rainbow Progress Bar
Dev: Antoinette Janus
Progress Bars
Dev: Kevin Sweeney
Loading Bar
See the Pen Loading Bar by Scott Clark (@saclark) on CodePen.
Dev: Scott Clark
Progress 99
Dev: simurai
Step progress bar with pure CSS
In this short blog post, I will show you how to create a custom step progress bar with CSS, which can be easily integrated into every application.
Let’s first start with the easy part – the HTML.
1 First 2 Second 3 Third 4 Forth As you see, the stepper-item element has 2 additional classes – active and completed. In our application, you would most probably set these classes dynamically. Now let’s focus on the harder part – the styling:
.stepper-wrapper < margin-top: auto; display: flex; justify-content: space-between; margin-bottom: 20px; >.stepper-item < position: relative; display: flex; flex-direction: column; align-items: center; flex: 1; @media (max-width: 768px) < font-size: 12px; >> .stepper-item::before < position: absolute; content: ""; border-bottom: 2px solid #ccc; width: 100%; top: 20px; left: -50%; z-index: 2; >.stepper-item::after < position: absolute; content: ""; border-bottom: 2px solid #ccc; width: 100%; top: 20px; left: 50%; z-index: 2; >.stepper-item .step-counter < position: relative; z-index: 5; display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; border-radius: 50%; background: #ccc; margin-bottom: 6px; >.stepper-item.active < font-weight: bold; >.stepper-item.completed .step-counter < background-color: #4bb543; >.stepper-item.completed::after < position: absolute; content: ""; border-bottom: 2px solid #4bb543; width: 100%; top: 20px; left: 50%; z-index: 3; >.stepper-item:first-child::before < content: none; >.stepper-item:last-child::after
Voila! With this CSS, you get a nice-looking progress stepper component, which is easily customizable at the same time. The lines that connect the different steps are represented as ::before and ::after pseudo-elements.
Keep in mind that if you decide to scale the element containing the step, you should also change the top value of the pseudo-elements. If you use SASS or CSS variables, you can easily adjust this, by making the top value half of the circle’s height .
Below you will find the code in action:
Code a responsive step progress bar with HTML, CSS, & JavaScript
In this tutorial we’ll be creating a responsive step progress bar. These are commonly used when a large form is split into several steps. They let the user know how much of a form they have completed and how many step remain.
Here’s what the completed progress bar will look like:
Let’s get started by creating the required HTML markup:
div id="progress"> div id="progress-bar"> div> ul id="progress-num"> li class="step active">1 li> li class="step">2 li> li class="step">3 li> li class="step">4 li> ul> div>Code language: HTML, XML (xml)button id="progress-prev" class="btn" disabled>Prev button> button id="progress-next" class="btn">Next button>Code language: HTML, XML (xml)Now for the JavaScript starting with variables for the various elements:
const progressBar = document.getElementById("progress-bar"); const progressNext = document.getElementById("progress-next"); const progressPrev = document.getElementById("progress-prev"); const steps = document.querySelectorAll(".step"); let active = 1;Code language: JavaScript (javascript)To navigate through the steps we’ll add an eventListener to detect clicks on each of the buttons:
progressNext.addEventListener("click", () => < active++; if (active > steps.length) < active = steps.length; >updateProgress(); >); progressPrev.addEventListener("click", () => < active--; if (active < 1) < active = 1; > updateProgress(); >);Code language: JavaScript (javascript)When the eventListener is triggered it increases or decreases the active count based on which button was clicked. It also prevents the active count from going higher or lower than the number of steps. We’re also calling a updateProgress function which looks like this:
const updateProgress = () => < // toggle active class on list items steps.forEach((step, i) => < if (i < active) < step.classList.add("active"); > else < step.classList.remove("active"); > >); // set progress bar width progressBar.style.width = ((active - 1) / (steps.length - 1)) * 100 + "%"; // enable disable prev and next buttons if (active === 1) < progressPrev.disabled = true; > else if (active === steps.length) < progressNext.disabled = true; > else < progressPrev.disabled = false; progressNext.disabled = false; > >;Code language: JavaScript (javascript)- Loops through each of the steps and toggles the active class.
- Set’s the progress bar width as a percentage based on the active and total steps.
- Disables the appropriate button when the active step is either the first or last step.
Now we just need to add some CSS to see the progress bar in action:
#progress < position: relative; margin-bottom: 30px; >Code language: CSS (css)Relative positioning so we can use absolute position on the children elements.
#progress-bar < position: absolute; background: lightseagreen; height: 5px; width: 0%; top: 50%; left: 0; >Code language: CSS (css)This sets the base styles for the the progress bar, we toggle it’s width via JavaScript.
#progress-num < margin: 0; padding: 0; list-style: none; display: flex; justify-content: space-between; >Code language: CSS (css)Flex layout to evenly distribute the numbers within the parent no matter the width.
#progress-num::before < content: ""; background-color: lightgray; position: absolute; top: 50%; left: 0; height: 5px; width: 100%; z-index: -1; >Code language: CSS (css)CSS pseudo-element that represents the inactive portion of the progress bar.
#progress-num .step < border: 3px solid lightgray; border-radius: 100%; width: 25px; height: 25px; line-height: 25px; text-align: center; background-color: #fff; font-family: sans-serif; font-size: 14px; position: relative; z-index: 1; >Code language: CSS (css)Styles each of the inactive steps inside a circle.
#progress-num .step.active < border-color: lightseagreen; background-color: lightseagreen; color: #fff; >Code language: CSS (css)Styles the active steps border and background color to match the progress bar.
That’s all for this tutorial, you should now have a working responsive step progress bar that you can can easily be customised to suit your individual requirements. As always you can find the full working source code used in this tutorial on Github.