Vibe UI
Initializing Vibe UI System...
Vibe UI

Progress

An indicator that displays the progress status of a task, typically represented as a progress bar or circle.

Progress

An indicator that displays the progress status of a task, typically represented as a progress bar or circle.

Preview

33%
75%

Installation

pnpm dlx vibe-ui-kit@latest add progress

Interactive Progress Simulator

Use the slider below to control and preview all progress designs in real time.

Interactive Value Controller45%

Horizontal Progress Designs

Default Style
Glassmorphic Glass
Retro Neobrutalist
Gradient Glow

Circular Progress Designs

Default
45%
Glass
45%
Retro
45%
Gradient
45%

All Variations

Explore different variations and styling presets of the Progress and Circular Progress components.

1. Default Style (60%)

2. Success Status Variant

3. Glassmorphic Style

4. Retro Neobrutalist Style

5. Gradient Glow Indicator

6. Indeterminate / Loading State

7. Thin Height Style

8. Progress with External Label Counter

Uploading files...72%

9. Custom Stepped Segment Progress

10. High Contrast Danger Alert Limit

11. Circular Progress - Default Style

45%

12. Circular Progress - Success with Large Stroke

80%

13. Circular Progress - Glassmorphic Style

65%

14. Circular Progress - Retro Neobrutalist Style

50%

15. Circular Progress - Gradient Design

90%

16. Real-time Scroll Position Tracker

Circular Scroll
0%
Glass Scroll
0%
Retro Scroll
0%
Horizontal Scroll Indicator0%

Contributors

JS
Jenish Sabhadiya

Theme Customizer

8px
@theme {
  --radius: 0.5rem;
  --glass-blur: 8px;
}
Changes apply instantly to this documentation workspace.
Progress | Vibe UI