43 CSS Progress Bars: Design Inspiration

Users hate waiting without knowing why. A CSS progress bar fixes that.

These visual indicators show task completion status, whether you’re building file uploaders, multi-step forms, or loading states. They reduce bounce rates and keep visitors engaged.

This guide covers practical CSS progress bar examples you can copy and customize. Animated bars, striped designs, circular indicators, gradient fills, and more.

Each example includes working code snippets with HTML structure and CSS styling ready for your projects.

You’ll also learn browser compatibility, common troubleshooting fixes, and when to use custom CSS versus the native progress element.

What is a CSS Progress Bar

A CSS progress bar is a visual indicator that displays task completion status using HTML structure and CSS styling.

It shows users how much of a process has finished, like file uploads, form submissions, or loading states.

The bar fills horizontally (or vertically) based on a percentage value, providing instant visual feedback without page refreshes.

How Does a CSS Progress Bar Work

Two nested elements create the foundation: a container div and an inner fill div.

The container sets the total width and background color. The fill element uses a percentage-based width to show completion status.

CSS properties like width, background-color, and transition control the appearance and animation.

When to Use a CSS Progress Bar

Common use cases:

• File upload indicators
• Multi-step form completion
• Page loading states
• Download progress tracking
• Skill level displays on portfolios
• Quiz or survey progress

Progress indicators improve user experience by reducing uncertainty during wait times.

CSS progress bar examples

Scroll-activated progress bar

See the Pen
Scroll activated progress bar by Bogdan Sandu (@bogdansandu)
on CodePen.

Radial Progress Bar

See the Pen
Radial Progress Bar by Tony Orcsik (@aorcsik)
on CodePen.

Dribbble Recreation Loading Bar

See the Pen
Dribbble Recreation: Loading Bar by Antoinette Janus (@internette)
on CodePen.

Cool Progress Bar

See the Pen
Progress by Gabriele Corti (@borntofrappe)
on CodePen.

Progress v2

See the Pen
Progress v2 by Kyle Shanks (@mavrK)
on CodePen.

Angular UI Progress Bar

See the Pen
Angular UI Progress Bar by Stephen Long (@long2know)
on CodePen.

Pure CSS radial progress bars

See the Pen
Pure CSS radial progress bar by Alex Marinenko (@jo-asakura)
on CodePen.

Colour Changing Upload Progress Bar

See the Pen
Simple Progress Bar by Álvaro (@alvarotrigo)
on CodePen.

Step Progress Bar Examples

See the Pen
Connect The Dots by Tim Ruby (@TimRuby)
on CodePen.

CSS 5 steps progress bar

See the Pen
CSS 5 steps progress bar by alecs popa (@alecspopa)
on CodePen.

3D Progress bar

See the Pen
Pure CSS Progress by Rafael González (@rgg)
on CodePen.

Circular Progress Bars (Pure CSS)

See the Pen
Circular minimalist progressive bars by Álvaro (@alvarotrigo)
on CodePen.

Wizard Progress Bar – CSS

See the Pen
Wizard Progress Bar – CSS by Tim (@tsneville)
on CodePen.

CSS Discrete Progress Bar

See the Pen
CSS Discrete Progress Bar by Laerin (@xgundam05)
on CodePen.

Donation Progress Bar

See the Pen
Donation Progress Bar by Stephen Emlund (@stemlund)
on CodePen.

Simple Clean Progress Bars

See the Pen
Animated Progress Bar w/ Jquery by Álvaro (@alvarotrigo)
on CodePen.

CSS only order process steps

See the Pen
CSS only order process steps by Jamie Coulter (@jcoulterdesign)
on CodePen.

CSS Progress bar with material design

See the Pen
Css Progress bar with material design by José Salazar (@salazarr-js)
on CodePen.

Progress Bar Liquid Bubble

See the Pen
Progress Bar Liquid Bubble by June Hanabi (@junebug12851)
on CodePen.

Animated Circular Progress Bars

See the Pen
CSS Progress Circle Animation by Álvaro (@alvarotrigo)
on CodePen.

Progress bar with lines and dots

See the Pen
Progress bar with lines and dots by Harisankaran Parameswaran (@hari_shanx)
on CodePen.

Orb Progress Bar

See the Pen
Orb Progress Bar by Ben Anderson (@benjammin412)
on CodePen.

Purple Progress Bar

See the Pen
Purple Progress Bar by Jasper (@jasper)
on CodePen.

Circular Progress Bar With Numbers

See the Pen
Pure CSS Circular Progress Bar (experimental) by Álvaro (@alvarotrigo)
on CodePen.

Lightsaber Progress (React, CSS)

See the Pen
Lightsaber Progress (React, CSS) by Andy Pagès (@andyNroses)
on CodePen.

Pixelated Progress Bar

See the Pen
Pixelated Progress Bar by Aleksandrs Cudars (@achudars)
on CodePen.

Reading Progress Bar

See the Pen
Reading Progess Bar CSS only by Ricardo Prieto (@ricardpriet)
on CodePen.

Simple Dynamic Progress Bar

See the Pen
Dynamic Progress Bar by Álvaro (@alvarotrigo)
on CodePen.

CSS3 animated loading bar

See the Pen
CSS3 animated loading bar by Alma Madsen (@nemophrost)
on CodePen.

Progress bar profile completion

See the Pen
Progress bar profile completion by Fadzli Razali (@fadzlitown)
on CodePen.

Task Progress Meter

See the Pen
Task Progress Meter by Clint Brown (@clintabrown)
on CodePen.

Pure HTML & CSS Step Progress Bar

See the Pen
Kirby DACH by Álvaro (@alvarotrigo)
on CodePen.

Pomodoro Timer

See the Pen
Pomodoro Timer by idx (@idx)
on CodePen.

Animated Gears Progress Bar

See the Pen
Loadbar with Animated Gears (SVG) by Jordan Kingsley (@jordankingsley)
on CodePen.

Stepper Progress Bar

See the Pen
Progress bar demo by Álvaro (@alvarotrigo)
on CodePen.

Light Progress Bar

See the Pen
light progress bar by FEAR ØF CODE (@fearOfCode)
on CodePen.

Pixel Progress Bar

See the Pen
Pixel Progress Bar by Ruben A Sanchez (@rubenasanchez)
on CodePen.

Progress Bar With Custom CSS Properties

See the Pen
Progress bar with CSS Custom Properties by Álvaro (@alvarotrigo)
on CodePen.

Warning bar

See the Pen
Warning bar by Morgan (@mog13)
on CodePen.

Expanding Loader

See the Pen
Expanding Loader by Eric Gregoire (@Boogiesox)
on CodePen.

Awesome Progress bar animation

See the Pen
Progress bar by Chintu Yadav Sara (@chintuyadav)
on CodePen.

How to Create a Basic CSS Progress Bar

Building a progress bar requires minimal code. Two HTML elements and a few CSS properties get you started.

HTML Structure for CSS Progress Bar

The markup is straightforward:

“ <div class="progress-container"> <div class="progress-fill"></div> </div> `

The outer div acts as the track. The inner div represents the filled portion.

CSS Styling for Progress Bar Container

` .progress-container { width: 100%; height: 20px; background-color: #e0e0e0; border-radius: 10px; overflow: hidden; } `

The overflow: hidden property keeps the fill contained within rounded corners.

Adjust height based on your user interface requirements.

CSS Styling for Progress Bar Fill

` .progress-fill { width: 70%; height: 100%; background: linear-gradient(90deg, #4caf50, #8bc34a); border-radius: 10px; transition: width 0.3s ease-in-out; } `

The width value controls completion percentage. Change it dynamically with JavaScript for real-time updates.

Smooth transitions make the bar feel responsive when values change.

CSS Progress Bar Properties

Master these core properties to customize any progress bar design.

Width and Height

Width controls the container size; use 100% for responsive design or fixed pixel values.

Height typically ranges from 4px (subtle) to 30px (prominent). Match your visual hierarchy needs.

Background-color and Gradients

Solid colors work for minimal designs. Gradients add depth.

` / Solid / background-color: #4caf50;

/ Linear gradient / background: linear-gradient(90deg, #667eea, #764ba2);

/ Radial for glow effect / background: radial-gradient(circle, #4caf50 0%, #2e7d32 100%); `

Border-radius

Creates rounded corners. Set equal to half the height for pill-shaped bars.

` / Rounded corners / border-radius: 5px;

/ Pill shape (if height is 20px) / border-radius: 10px;

/ Fully round / border-radius: 9999px; `

Transition and Animation

Transitions smooth value changes; animations create continuous motion.

` / Smooth width changes / transition: width 0.4s ease-in-out;

/ Bouncy feel / transition: width 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);

/ Continuous animation / animation: pulse 1.5s ease-in-out infinite; `

The ease-in-out timing function feels natural. Use linear for striped bar movement.

CSS Progress Bar Browser Support

Modern browsers handle CSS progress bars without issues.

Test circular progress bars using conic-gradient in older Safari versions.

The native element has inconsistent styling across browsers, making custom CSS solutions more reliable.

Common CSS Progress Bar Issues

Quick fixes for the problems you’ll actually encounter.

Progress Bar Not Displaying Correctly

Symptoms: Fill overflows container, rounded corners break, bar invisible.

Fixes:

• Add overflow: hidden to container

• Set position: relative on container

• Ensure fill has height: 100%

• Check that container has explicit height

Animation Performance Problems

Choppy animations drain battery and frustrate users.

Optimize with:

` .progress-fill { will-change: width; transform: translateZ(0); } `

Avoid animating width on complex pages; use transform: scaleX() instead for GPU acceleration.

Responsive Progress Bar Sizing

Progress bars should adapt to different viewport sizes.

` .progress-container { width: 100%; max-width: 500px; height: clamp(8px, 2vw, 20px); } `

Use media queries to adjust height on mobile devices where touch targets matter.

CSS Progress Bar vs HTML Progress Element

Two approaches exist: custom CSS divs or the native HTML element.

Native Progress Element

` <progress value="70" max="100">70%</progress> `

Pros: Semantic, accessible by default, works without CSS.

Cons: Limited styling options, inconsistent browser rendering, pseudo-elements vary by browser.

Custom CSS Progress Bar

Pros: Full design control, consistent cross-browser appearance, unlimited animation options.

Cons: Requires ARIA attributes for web accessibility, more code to maintain.

Accessibility Considerations

Custom progress bars need proper ARIA markup:

` <div role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" aria-label="File upload progress" > <div class="progress-fill"></div> </div> `

Update aria-valuenow dynamically when values change.

Screen readers announce progress updates, keeping all users informed.

When to Use Each Approach

Choose native when: Simple styling works, accessibility is priority, minimal customization needed.

Choose custom CSS when: Brand consistency matters, complex animations required, cross-browser uniformity expected.

Most production sites use custom CSS for control. The native element suits quick prototypes and minimalist design projects.

FAQ on CSS Progress Bars

How do I create a simple CSS progress bar?

Create two nested div elements: a container and a fill. Style the container with a background color and fixed height. Set the fill width as a percentage to show completion status. Add border-radius for rounded corners.

How do I animate a CSS progress bar?

Use CSS animation with keyframes to animate the width property from 0% to your target value. Add transition: width 0.3s ease for smooth changes when updating values dynamically with JavaScript.

Can I make a circular progress bar with CSS only?

Yes. Use conic-gradient on a circular div or manipulate SVG stroke-dasharray values. The conic-gradient method requires fewer lines of code but offers less animation flexibility than SVG approaches.

What is the difference between determinate and indeterminate progress bars?

Determinate bars show exact completion percentage, like file uploads. Indeterminate bars animate continuously without specific values, used when completion time is unknown. Both serve different user experience needs.

How do I add a percentage label to my progress bar?

Use the CSS ::after pseudo-element with content property for static labels. For dynamic percentages, add a span element inside the fill and update its text content with JavaScript as values change.

Why is my progress bar fill overflowing the container?

Add overflow: hidden to your container element. Ensure the container has position: relative and explicit height. Check that the fill element uses height: 100% instead of a fixed pixel value.

How do I make a striped progress bar?

Apply repeating-linear-gradient at 45 degrees with alternating colors. Set background-size to control stripe width. Animate background-position for moving stripes that indicate ongoing activity.

Is the native HTML progress element better than custom CSS?

The native element offers built-in accessibility but limited styling options. Custom CSS provides full design control and consistent cross-browser compatibility. Most production sites prefer custom implementations.

How do I make my progress bar accessible?

Add role=”progressbar” along with ARIA attributes: aria-valuenow, aria-valuemin, aria-valuemax, and aria-label. Update aria-valuenow dynamically so screen readers announce progress changes to users.

Can I use CSS variables to control progress bar values?

Yes. Define –progress: 70% on the container and use width: var(–progress) on the fill. Update the custom property with JavaScript for reactive progress bars without modifying inline styles directly.

Conclusion

These CSS progress bar examples give you ready-to-use code for any project. From basic horizontal bars to animated loaders and circular indicators, you now have the building blocks.

Pick the style that fits your interface. Customize colors, dimensions, and animation timing to match your brand.

Remember the fundamentals: use overflow: hidden on containers, add ARIA attributes for accessibility, and test across browsers.

Performance matters too. Stick to transform and opacity` for smooth animations on complex pages.

Progress indicators reduce perceived wait time and keep users engaged. A simple visual feedback element makes the difference between frustration and a polished experience.

Start with the basic example, then experiment with gradients, stripes, and micro-interactions as your skills grow.