Progress Bar Component

Basic Progress Bars

Simple Progress Bar

Clean linear progress with percentage.

75%

Striped

Static striped fill.

60%

Animated Striped

Continuously animated stripes.

85%

Colored Progress Bars

Success

90%

Warning

65%

Danger

35%

Info

80%

Advanced Styles

Rounded

70%

Glow

55%

Gradient

88%

Pulse

42%

Premium Styles

3D

Depth and perspective.

70%

Neumorphic

Soft shadows.

65%

Glass

Frosted glass effect.

85%

Holographic

Iridescent gradient.

55%

Liquid

Wave-like fill.

75%

Neon

Glow effect.

90%

Interactive Progress Bars

Controlled Progress Bar

0%

Animated Progress Bar

0%

Custom Progress Bar

0%

Circular Progress Bars

75%

Basic Circular

60%

Large Circular

85%

Gradient Circular

SVG Shape Progress

Heart

Stroke-based heart shape.

70%

Star

Five-pointed star.

65%

Hexagon

Hexagon outline.

80%

Particle-style Progress

Floating particles

Animated particles around the bar.

60%

Explosion particles

Bold bar with particle effect.

75%

Step Progress

Horizontal Steps

Multi-step horizontal indicator.

Step 1

Step 2

3

Step 3

4

Step 4

Vertical timeline

Vertical step progress.

Phase 1

Planning

Phase 2

Development

3

Phase 3

Testing

4

Phase 4

Launch

Milestone progress

Track with milestone markers.

Vertical & More

Vertical progress

Bar grows from bottom.

60%

85%

Indeterminate

Loading state (no fixed %).

Segmented (5 steps)

Discrete segments.

3 / 5

Real-time Style

CPU-style

Simulated live value.

CPU 45%

Cores: 8 Temp: 65°C

Memory-style

Memory 62%

Used: 9.8 GB Total: 16 GB

Configuration & Export

Basic Settings

Progress Value 75%

Show Text

Style Settings

Primary Color

Background Color

Animation

Duration (s) 1s

Export / Import

Live Preview

75%