Progress Bar Generator
Create custom CSS progress bars with live preview. Choose style, colors, radius and export clean HTML + CSS.
① Set percentage and pick a style ② Adjust colors and height ③ Copy the CSS and HTML
/* CSS */
.progress-wrap {
background: #2a2a2a;
border-radius: 999px;
height: 20px;
overflow: hidden;
position: relative;
}
.progress-bar {
width: 65%;
height: 100%;
border-radius: 999px;
transition: width 0.3s;
background: #c9b89a;
}
/* HTML */
<div class="progress-wrap">
<div class="progress-bar"></div>
</div>What is a CSS progress bar and when should you use one?
A CSS progress bar is a UI component that visually represents the completion of a task, loading state, or metric. Built with pure HTML and CSS, it requires no JavaScript for static display. The outer wrapper provides the track (background), while the inner div fills proportionally using width: {percentage}%. Striped bars use repeating-linear-gradient at 45 degrees for a classic look. Animated stripes apply a background-position keyframe animation to simulate movement. Gradient bars use linear-gradient for depth. The border-radius property rounds both wrapper and bar consistently. Progress bars are widely used in dashboards, skill sections, onboarding flows, and file upload UIs.