PROGRESS BAR

<Progress>progress.tsx
G2G
PILL

XS

Small

Medium (Default)

Large

XL

2XL

ROUNDED

XS

Small

Medium (Default)

Large

XL

2XL

DIRECTION EXAMPLES

LTR

RTL

LTR / Weak

RTL / Weak

LTR / Weak / Thin

RTL / Weak / Thin

INDICATOR SHAPES

Pill

Rounded

Square

Pill

Rounded

Square

TRACK SHAPES

XS / Thin

SM / Thin

MD / Thin

LG / Full

CARD

Default

Strong

Weak

Positive

Negative

Warning

Positive / Brand

Negative / Positive

Negative / Brand

Negative / Brand / Positive

Negative / Warning / Positive

Positive / Warning / Negative

MUTED / NAV

Default

Strong

Weak

Positive

Negative

Warning

PAGE

Default

Strong

Weak

Positive

Negative

Warning

TRACK VARIANTS

Default Track

Strong Track

Weak Track

Positive Track

Negative Track

Warning Track

MIXED VARIANTS

Positive on Strong

Negative on Weak

Warning on Default

Strong on Positive

Default on Warning

Weak on Negative

DIRECTION EXAMPLES

LTR

RTL

STATES

Default

Half

Complete

ANIMATION

Animated Progress

SHAPE EXAMPLES

Rounded XL

Square XL

Rounded 2XL

Square 2XL

PROGRESS LABELS

PROGRESS LABELS - END POSITION

Percentage Label (Auto Color)

50%

Text Label (Auto Color)

Processing...

Custom Label Color (Tert)

33 of 100

No Label (Default)

PROGRESS LABELS - INDICATOR POSITION

Label at 25%

25%

Label at 50%

50%

Label at 75%

75%

RTL with Label at 60% (Label on Left)

60%
RTL INDICATOR POSITION TESTS

RTL at 25% (Label on Left)

25%

RTL at 60% (Label on Left)

60%

RTL at 90% (Label on Left)

90%

RTL at 100% (Label on Left)

100%
EDGE CASES - INDICATOR POSITION

Near Start (5%)

5%

Near End (95%)

95%

At Start (0%)

0%

At End (100%)

Complete!

LABEL EDGE FADE VARIANTS

EDGE FADE SIZES

Default (8px fade)

edge-fade-x

Small (4px fade)

edge-fade-x-sm

Large (16px fade)

edge-fade-x-lg

LABEL COLOR VARIANTS

AUTO LABEL COLORS (Match Variant)

Positive (Auto)

50%

Negative (Auto)

60%

Warning (Auto)

75%

Default (Auto)

40%
CUSTOM LABEL COLORS

Pos Bar with Tert Label

50%

Neg Bar with Prim Label

60%

Default Bar with Pos Label

75%

Strong Bar with Quat Label

40%

LABEL VISIBILITY

HOVER VISIBILITY

Always Visible (Default)

50%

Show on Hover

60%

Color Change on Hover (Quat → Variant)

75%

No Label

HOVER WITH DIFFERENT POSITIONS

End Position - Show on Hover

50%

End Position - Color on Hover (Quat → Neg)

60%

RTL Indicator - Show on Hover

75%

Custom Color + Hover

80%

HOVER TRIGGER COMPARISON

SELF HOVER (DEFAULT)

Hover on Progress Bar

60%

The progress bar creates its own hover zone

PARENT HOVER

Hover Anywhere Here

60%

The parent container provides the hover zone

STATUS PROGRESS BARS

STATUS VARIANTS

Backlog

Ready for Dev

On Track

WIP

Cancelled

COMBO PROGRESS

STATUS VARIANTS

Foundation

Feature Complete

Polish

Production

LATENCY TEST

STATUS VARIANTS