Progress bars are everywhere. Forms, file uploads, skill levels, project timelines. They show users where they stand without making them guess.
Looking through CSS progress bar examples helps you pick the right visual feedback for your project. Some situations need a simple linear bar. Others benefit from circular indicators or animated gradients.
This guide covers custom progress bar designs you can build with HTML and CSS. You’ll see how to create responsive designs that work across browsers, add smooth animations with transition effects, and match your brand’s color schemes.
We’ll walk through code for loading animations, percentage indicators, and striped patterns. Each example includes the CSS structure so you can adapt it for your needs.
CSS Progress Bar Examples
Circular/Radial CSS Progress Bars
Radial Progress Bar
Author: Antal Orcsik
This progress bar example features 5 radial demos. They transform a white background into something special.
They include:
1. Three radial bars
- The 40px progress text of the default radial progress bar sits in the center.
- The pie chart radial bar includes three sets of values at the center.
- The multi-circle radial bar includes concentric circles positioned around each other.
2. Two radial inline icons
- These are small icons that come in a pie chart form and a semi-transparent form.
Flat Progress Bar CSS e HTML
Author: Shankar Cabus
HTML, CSS, and JavaScript create this circular progress bar pie.
CSS Circular Progress
Author: Mattia Astorino
This example is a circular progress bar. The author built it with CSS conic-gradient and custom properties.
Progress v2
Author: Kyle Shanks
This is a semi-transparent radial progress bar that flips once loading is complete.
Step Progress Bar Examples
Connect The Dots
Author: Tim Ruby
This step progress bar has smooth movements and a thin line that reminds one of a thermometer.
Wizard Progress Bar – CSS
Author: Tim
This is a CSS progress bar with an awesome style and font size.
Subway Stop Progress Bar
Author: Paul Grant
This HTML & CSS progress bar example helps online shops increase customer satisfaction.
The progress bar is set against a dark background with a black outline around the bars and buttons. Use the Prev and Next buttons to move the progress bar from step to step and back again.
CSS only order process steps
Author: Jamie Coulter
Here is an intuitive CSS3 progress bar. It shows the different stages of processing a customer’s order on a website.
Stepped Progress
Author: Cassidy Williams
Here is a minimal stepped progress bar made with very little JavaScript.
Progress bar with lines and dots
Author: Harisankaran Parameswaran
This template features 4 CSS step progress bars. Each has a linear gradient so that online merchants can attract customers to their shops.
Step Progress Bar
Author: Timothy von Hollen
Here is a step progress bar that is easy to customize. Change the value within the step box to add or remove steps.
Rounded Corner Progress Bars
Bars
Author: Lucagez
This demo contains multiple CSS progress bars made with SVG patterns.
Simple Rounded corner Progress Bar – CSS
Author: Goatsy
Here is a simple rounded corner progress bar made with HTML & CSS.
Lightsaber Progress (React, CSS)
Author: Andy Pages
This is a cool Star Wars movie-inspired progress bar that appears in the form of a lightsaber. It was created with ReactJS and a few CSS lines of code.
Progress bar
Author: Emil Rune Møller
This progress bar uses CSS code to create a simple loading animation with JavaScript data updates.
CSS3 animated loading bar
Author: Alma Madsen
The author used HTML, CSS, and JavaScript code to create this progress bar example. It features a div class style width of 60%.
Simple progress bar animation
Author: Traf
This progress bar uses the HTML5 custom data attribute. This allows for fast updates to a progress bar animated by Zepto (or jQuery).
The animation is wrapped in a window resize function. So it reanimates if the user resizes the browser.
Dynamic Progress Bar CSS
Author: Chris Gruber
Here is a simple step CSS progress bar that is responsive. When added or removed, the spacing between each numbered step is auto-adjusted.
Pomodoro Timer
Author: IDX
An elegant progress bar that descends with an accompanying timer. It has a beautiful red background color that captures the user’s attention.
progress bar
Author: Aashima
This template has 4 CSS position relative progress bars against a white background. These progress bars include descriptive textual representations (words and percentages) created with linear-gradient.
Rainbow Progress Bar
Author: Antoinette Janus
Here is a pure HTML & CSS progress bar that uses the repeating-linear-gradient.
light progress bar
Author: Konstantin
This rounded edge progress bar uses an HTML & CSS light animation.
Loading Bar
Author: Artboard Artisan
Here is a simple loading bar that provides the illusion of a working progress bar.
Orb Progress Bar
Author: Ben Anderson
Here is a progress bar animation made only with HTML & CSS.
Animated Progress Bars
Author: Aaron Farrar
This template features multiple rounded edge progress bars.
Rectangular Progress Bar Examples
A Pen by Dan
Author: Dan
A simple rectangular progress bar with a beautiful green background color.
Simple Progress Bar CSS
Author: wolfgang1983
Here is a simple CSS progress bar example that does not include HTML or JavaScript code.
Animated Progress Bar
Author: Thibaut
Here is a simple animated rounded edge progress bar made with HTML & CSS.
Warning bar
Author: Morgan
Here is a CSS progress bar animation. It uses gradients and variables to create a scrolling warning bar.
Progress Bars
Author: Dustin Smith
This template has a white background and 3 blue rectangular progress bars within a black card.
Each bar has grey borders and white text that users can alter to fit the needs of the site. This style will attract any customer’s attention at first sight.
Ajax Progress Bar
Author: ARNAB MUNSHI
This is a minimal progress bar made with HTML, CSS & JavaScript.
Static Progress Bar vs. Progress Bar with Opposing Animation
Author: Kevin Sweeney
This template has two progress bar demos. One with a static stripe animation and the other with an opposing animation.
UX Progress Bar
Author: Fersho Pls
Here is a simple, minimal, and attractive progress bar design.
Dynamic Survey / Quiz
Author: Mathew
This progress bar is ideal for questionnaires, tests, and survey pages.
Download Progress Bar (CSS)
Author: Amli
A smooth progress bar built with SCSS & Pug code.
Simple animated progress bar CSS & JS
Author: Cloud Andrade
This template features 6 customizable progress bars.
Dribbble Recreation: Loading Bar
Author: Antoinette Janus
This progress bar design is beautiful. Built with HTML, CSS, and JavaScript it features a gif image in the loading bar space.
Project Progress Bar
Author: Amira Hailemariam
This project bar progress bar is ideal for use in project management.
Pixelated Progress Bar
Author: Aleks
This stunning neon green progress bar will attract site visitors. It includes an eye-catching white border with a light shadow around the bar.
Reading Bar Progress Bars
Reading Progess Bar CSS only
Author: Ricardo Prieto
This template is a CSS position relative progress bar for reading articles. Built with HTML & CSS, it does not include PHP or JavaScript.
Animated Progress Bar
Author: Pierre Vion
The author made this with CSSFlow (free UI elements and widgets coded with HTML5, CSS3, and Sass).
To view the original article and download the Sass/SCSS source code go to: www.cssflow.com/snippets/animated-progress-bar
Vin Thomas created the original PSD. This progress bar has been tested in Safari 5.1, Firefox 4, Opera 10, Chrome 13, IE 9 (and newer).
Player Progress Bar
Author: Manish Yadav
This progress bar example features a draggable handle.
Progress bar profile completion
Author: Fadzli Razali
This progress bar features an attractive mix of white, orange, and blue colors. The percentage circle is set against a white background.
progress bar
Author: Vasily Guzov
This features a beautiful background color that changes as the user scrolls. The loading bar is at the top of the page to attract the user’s attention.
It also includes textual representation in percentages that increase with scrolling.
Multi Style Progress Bar Examples
SVG Loading icons
Author: Aurer
This is an HTML & CSS animated SVG progress bar example with 8 loading images. This example is great for use as a loading animation.
Only (S)CSS loading animation
Author: Tobias Glaus
The idea for this progress bar is from Gal Shir. The code is a mess but has great outer values and is customizable.
Progress bar animation
Author: Eva Wythien
Here are 3 progress bars with CSS animation.
Progress Bar
Author: Mike Aparicio
This progress bar is made with HTML & CSS code.
Mega progress bar
Author: Wouwisl
Here is a simple CSS position absolute progress bar with textual representation (percentages).
Interactive Progress Bar (CSS TRICKS)
Author: Mos
This template features two project bar demos.
Pure CSS Progress
Author: Rafael Gonzalez
Here is a cool option that deserves exploring. It is a pure CSS progress bar with a colorful liquid design.
Expanding Loader
Author: Eric Gregoire
A thin line progress bar. It expands to animate a purple 100% background color as soon as loading is complete.
Customizable Progress Bar
Author: Thomas Wicker
This is a customizable jQuery progress bar made with SCSS/SASS and HTML5.
FAQs about CSS progress bars
How do you create a basic CSS progress bar?
Start with two nested div elements. The outer container sets the full width and background color.
The inner div represents the filled portion and uses a percentage width. Add border radius for rounded corners and transition properties for smooth animations when the value changes.
Can you make a progress bar without JavaScript?
Yes. Pure CSS progress bars work fine for static displays like skill levels or completion percentages.
You set the width property directly in your HTML or stylesheet. For dynamic progress updates during file uploads or loading states, you’ll need JavaScript to modify the width value in real time.
What’s the difference between linear and circular progress bars?
Linear bars fill horizontally (or vertically) across a straight line. They’re perfect for loading animations and form completion.
Circular progress indicators wrap around a circle’s perimeter. These work well for dashboards, skill ratings, and situations where space is tight or you want a more visual impact.
How do you add percentage text inside a progress bar?
Position a span element inside your progress container using absolute positioning. Set the parent to relative.
Center the text with flexbox or text alignment properties. Make sure your color scheme provides enough contrast so the percentage stays readable against both the filled and unfilled portions.
Are CSS progress bars accessible?
They can be if you add proper ARIA attributes. Include role=”progressbar”, aria-valuenow, aria-valuemin, and aria-valuemax.
Screen readers need these to announce the current value. Also provide text alternatives for users who can’t see the visual feedback. Never rely solely on color to convey status.
How do you animate a progress bar smoothly?
Use CSS transition properties on the width (for linear bars) or stroke-dashoffset (for SVG circles). Set a duration like 0.3s and an easing function.
The transition effects create smooth motion instead of instant jumps. For more complex animations, CSS keyframes let you control multiple stages or add bounce effects at completion.
Can progress bars be responsive?
Absolutely. Use percentage-based widths instead of fixed pixels for the container.
The responsive design adapts to different screen sizes automatically. Test on mobile devices to ensure touch targets are large enough and text remains readable at smaller viewport dimensions.
What are striped progress bars used for?
Striped patterns indicate ongoing activity or indeterminate progress. The diagonal lines suggest motion even when static.
Combine striped patterns with CSS animations to make them move horizontally. This works great for processing states where you can’t calculate an exact percentage but need to show something’s happening.
How do you style the HTML5 progress element?
The native progress element is tricky because browsers style it differently. You need vendor-specific pseudo-elements like ::-webkit-progress-bar and ::-moz-progress-bar.
Many developers skip the HTML5 element entirely and build custom progress elements with divs for consistent cross-browser appearance and easier styling control.
What colors work best for progress bars?
Blue and green signal progress and success in most contexts. Red typically means error or critical status.
Your color schemes should match your brand while maintaining sufficient contrast for accessibility. Consider good color combinations that work across light and dark themes if your site supports both modes.
Conclusion
These CSS progress bar examples give you a starting point for building status indicators that match your project needs. Whether you go with gradient effects, circular designs, or simple linear bars, the code snippets here adapt to different contexts.
Remember that smooth animations matter more than you’d think. Users notice when transitions feel jerky or delayed.
Test your progress bars across browsers since webkit and Firefox handle certain properties differently. Mobile devices need special attention too.
The best implementations balance visual appeal with accessibility features. Screen readers need ARIA attributes to announce progress values to users who can’t see your carefully crafted animations.
Start with a basic HTML structure and layer in CSS3 properties gradually. Add CSS animations for movement, adjust your color palette for brand consistency, and validate that percentage indicators remain readable at all fill levels.
Your users deserve clear visual feedback about what’s happening behind the scenes.
If you liked this article about CSS progress bars, you should check out this article about CSS select styles.
There are also similar articles discussing CSS loaders, CSS login forms, CSS background patterns, and CSS image effects.
And let’s not forget about articles on CSS dropdown menus, CSS border animations, CSS arrows, and CSS cards.
