<\!-- Back --> <\!-- Header -->
CSS Generators
Progress Bar Generator
Design custom CSS progress bars with live preview, animated stripes, gradients, and presets. Copy-paste ready code.
<\!-- ═══ Controls ═══ --> <\!-- Presets --> <\!-- Dimensions --> <\!-- Colors --> <\!-- Fill --> <\!-- Label --> <\!-- Reset --> <\!-- ═══ Preview & Code ═══ --> <\!-- Live Preview --> <\!-- CSS Code --> <\!-- HTML Code -->
<\!-- Related Tools --> Presets
Dimensions
Colors
Fill & Animation
Label
Live Preview
CSS Code
.pb-container {
width: 400px;
height: 24px;
border-radius: 12px;
background: #1a1a2e;
overflow: hidden;
position: relative;
}
.pb-fill {
width: 65%;
height: 100%;
border-radius: 12px;
background: #00ffcc;
transition: width 0.3s ease;
}
.pb-label {
font-size: 13.200000000000001px;
font-weight: 700;
font-family: 'SF Mono', 'Fira Code', monospace;
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
color: rgba(0, 0, 0, 0.7);
}
HTML Code
<div class="pb-container">
<div class="pb-fill">
<span class="pb-label">65%</span>
</div>
</div>