DONUT PROGRESS

<DonutProgress>donut-progress.tsx
G2G
BASIC EXAMPLES

Default (75%)

With Label

62%

Empty (0%)

Complete (100%)

✓
VARIANTS

Brand

75%

Positive

85%

Negative

25%

Warning

50%

Base

65%
SIZES

Small (r=20)

75%

Default (r=32)

75%

Large (r=50)

75%

XL (r=70)

75%
CARBON GREY TRACK

Brand on Grey

75%

Positive on Grey

85%

Negative on Grey

25%

Warning on Grey

50%
DEFAULT TRACK

Brand Default

75%

Positive Default

85%

Negative Default

25%

Warning Default

50%
ON DIFFERENT BACKGROUNDS

Brand on Grey (Muted BG)

75%

Positive on Grey (Muted BG)

85%

Default Track (Muted BG)

65%
BASE PROGRESS GAUGE

Thin Track

66%
GRADIENT RISK GAUGE

NEG - BRAND - POS

76%
GRADIENT RISK GAUGE WITH NEEDLE

NEG - BRAND - POS

76%
THIN TRACK SIZE

Thin Track + 4px Indicator

75%

Thin Track + 8px Indicator

75%

Thin Track + 12px Indicator

75%

Thin Track + 16px Indicator

75%
FULL TRACK SIZE

Full Track + 4px

60%

Full Track + 8px

60%

Full Track + 12px

60%

Full Track + 16px

60%
TRACK SIZE COMPARISON

Standard Progress

65%
80%
45%

Thin Track Progress

65%
80%
45%
ANIMATION

Animated Progress

13%

Animated Thin Track

13%
THIN TRACK USE CASES

Compact UI

75
60
90

Elegant Progress

68%

Complete

Subtle Track

42

tasks

PERFORMANCE METRICS

CPU Usage

Last 5 minutes

45%

Memory

8.2GB / 16GB

51%

Disk Space

420GB / 500GB

84%
PROJECT STATUS

Sprint Progress

12 of 20 tasks complete

60%

Code Coverage

Unit tests

88%

Build Success Rate

Last 30 days

95%
FINANCIAL GOALS

Q4 Revenue

$2.4M of $3M target

80%

Budget Spent

Marketing dept

35%

Savings Goal

$8,500 / $10,000

85%