Progress Bar Playground
Color Variants
Primary
Secondary
Success
Warning
Danger
Info
Size Variants
Extra Small
Small
Medium
Large
Extra Large
Striped & Animated
Striped
Striped + Animated
Glow Effect
Pulse Animation
Gradient Styles
Primary Gradient
Success Gradient
Fire Gradient
Ocean Gradient
Rainbow Gradient
Labels
Label Inside
Label Outside
Label Floating
Custom Format
Circular Progress
Gauge / Semi-Circular
Indeterminate / Loading
Indeterminate
Shimmer Effect
Thresholds (Interactive)
30% Safe
65% Warning
90% Danger
Buffer (Video Style)
Simulate Playback
Milestones
Start
Q1
Q2
Q3
Complete
Step Progress
Step 1
Step 2
Step 3
Step 4
Step 5
Skill Bars (Animate on View)
JavaScript
95%
CSS/SCSS
90%
React
85%
Node.js
75%
JavaScript API Demo
Reset
+10
-10
Animate to 100%
Complete