Radial Progress renders a CSS circular gauge with a percentage value at its centre. Set value (0–100) and optionally size and thickness to customize the ring.
Basic Radial Progress
0%
25%
50%
75%
100%
<div class="flex flex-wrap items-center gap-4">
<c-lb.radial-progress value="0">0%</c-lb.radial-progress>
<c-lb.radial-progress value="25">25%</c-lb.radial-progress>
<c-lb.radial-progress value="50">50%</c-lb.radial-progress>
<c-lb.radial-progress value="75">75%</c-lb.radial-progress>
<c-lb.radial-progress value="100">100%</c-lb.radial-progress>
</div>
Custom Size and Thickness
70%
70%
70%
70%
<div class="flex flex-wrap items-center gap-4">
<c-lb.radial-progress value="70" progressSize="4rem">70%</c-lb.radial-progress>
<c-lb.radial-progress value="70" progressSize="6rem">70%</c-lb.radial-progress>
<c-lb.radial-progress value="70" progressSize="8rem">70%</c-lb.radial-progress>
<c-lb.radial-progress value="70" progressSize="10rem" thickness="4px">70%</c-lb.radial-progress>
</div>
Color Variants
60%
70%
80%
90%
<div class="flex flex-wrap items-center gap-4">
<c-lb.radial-progress value="60" variant="primary">60%</c-lb.radial-progress>
<c-lb.radial-progress value="70" variant="secondary">70%</c-lb.radial-progress>
<c-lb.radial-progress value="80" variant="accent">80%</c-lb.radial-progress>
<c-lb.radial-progress value="90" variant="success">90%</c-lb.radial-progress>
</div>
Background Variant
60%
70%
80%
90%
<div class="flex flex-wrap items-center gap-4">
<c-lb.radial-progress value="60" bgVariant="primary" class="border-4">60%</c-lb.radial-progress>
<c-lb.radial-progress value="70" bgVariant="secondary" class="border-4">70%</c-lb.radial-progress>
<c-lb.radial-progress value="80" bgVariant="accent" class="border-4">80%</c-lb.radial-progress>
<c-lb.radial-progress value="90" bgVariant="success" class="border-4">90%</c-lb.radial-progress>
</div>
API Reference
c-lb.radial-progress
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
| class | string | - | No | Additional CSS classes to apply |
| variant |
neutral
primary
secondary
accent
info
success
warning
error
|
- | No | Color variant |
| bgVariant |
neutral
primary
secondary
accent
info
success
warning
error
|
- | No | Background color variant |
| value | string |
0
|
Yes | Progress percentage (0-100) |
| progressSize | string | - | No | Custom size (e.g., '5rem'). Sets --size CSS variable |
| thickness | string | - | No | Custom stroke thickness (e.g., '4px'). Sets --thickness CSS variable |
| Slot Name | Description |
|---|---|
| default | Content displayed in the center (typically the percentage text) |