Bilal UI
Bilal UIalpha
Components

Progress

Displays an indicator showing the completion progress of a task.

Last updated: March 11, 2026

Basic Progress

A simple progress indicator with a fixed value.

Progress With Label

Progress bar with simple label text.

Profile completion

Progress With Percentage

Progress bar with numeric percentage.

Uploading...72%

Progress Animated

Auto-incrementing animated progress example.

Loading0%

Progress Controlled

Progress controlled with increment/decrement buttons.

40%

Progress Multi Step

Stepper-style progress for multi-stage flows.

DetailsPaymentReviewConfirm

Progress Segmented

Segmented progress bar with legend.

Used 45%
Cached 25%
Free 30%

Progress Thin

Minimal thin progress line.

Reading progress

Progress Thick

Larger bold progress bar variant.

Progress With Badge

Progress row with status badge.

Task completeDone

Progress Indeterminate

Indeterminate loading bar pattern.

Connecting to server...

Progress Success Error

Interactive success/error state transitions.

Progress Gradient

Gradient-filled progress indicator.

XP Progress2,400 / 3,000

Progress Striped

Striped visual treatment for activity progress.

Progress Circular

Circular SVG progress indicator.

74%

Progress Inline List

Small inline progress bars for lists.

Design
90%
Frontend
65%
Backend
40%
QA
20%

Progress Countdown

Decreasing countdown progress with controls.

Progress File Upload

Multiple file upload progress list.

report.pdfDone
photo.jpg67%
archive.zip23%

Progress Skill Bars

Labeled skill percentage bars.

TypeScript92%
React88%
Node.js75%
Rust40%

Progress Storage

Storage usage card with dual labels.

Storage10.2 GB of 15 GB used
68% used32% free