Progress Component

Capsule-shaped progress bars with solid ink borders, smooth animations, and various patterns.

Basic Progress

0%Empty

50%Half

100%Complete

Accent Variant

Storage Used45%

Upload Progress78%

Animated Progress (Framer Motion)

Smooth Easing Animation0%

Indeterminate / Loading

Pattern Styles

Static Stripes

Animated Stripes

Size Variations

Thick Progress Bar

Default (h-3)

Thin Progress Bar

Segmented Progress

Step Progress2 of 5

3 Steps

7 Steps

Circular Progress

25%

50%

75%

100%

Real-world Examples

File Upload

document.pdf

Complete

images.zip

67%

video.mp4

23%

Skills Overview

TypeScript90%

React85%

Node.js75%

GraphQL60%