Gauge
Circular ring indicator for displaying progress or levels.
Selectors
.gauge- Circular ring progress indicator. Set
--gauge-value(0 to 1) to control fill. .gauge-sm- Small size variant (40px).
.gauge-lg- Large size variant (96px).
.gauge-green- Green color variant.
.gauge-orange- Orange color variant.
.gauge-destructive- Destructive (red) color variant.
Default
25%
50%
75%
<div class="flex items-center gap-6">
<div class="gauge" style="--gauge-value: 0.25"><span>25%</span></div>
<div class="gauge" style="--gauge-value: 0.50"><span>50%</span></div>
<div class="gauge" style="--gauge-value: 0.75"><span>75%</span></div>
</div>Sizes
60%
60%
60%
<div class="flex items-center gap-6">
<div class="gauge gauge-sm" style="--gauge-value: 0.6"><span>60%</span></div>
<div class="gauge" style="--gauge-value: 0.6"><span>60%</span></div>
<div class="gauge gauge-lg" style="--gauge-value: 0.6"><span>60%</span></div>
</div>Colors
40%
65%
80%
92%
<div class="flex items-center gap-6">
<div class="gauge" style="--gauge-value: 0.4"><span>40%</span></div>
<div class="gauge gauge-green" style="--gauge-value: 0.65"><span>65%</span></div>
<div class="gauge gauge-orange" style="--gauge-value: 0.80"><span>80%</span></div>
<div class="gauge gauge-destructive" style="--gauge-value: 0.92"><span>92%</span></div>
</div>Without Label
<div class="flex items-center gap-6">
<div class="gauge gauge-sm" style="--gauge-value: 0.33" role="img" aria-label="33%"></div>
<div class="gauge" style="--gauge-value: 0.66" role="img" aria-label="66%"></div>
<div class="gauge gauge-lg" style="--gauge-value: 1" role="img" aria-label="100%"></div>
</div>