Django Radial Progress Component

Radial Progress renders a CSS circular gauge with a percentage value at its centre. Set value (0–100), plus size and thickness to adjust the ring.

Basic Radial Progress

Preview

25%

50%

75%

100%

Code

<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

Preview

70%

Code

<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

Preview

60%

70%

80%

90%

Code

<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

Preview

60%

70%

80%

90%

Code

<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>

Reactive value

Bind value to a signal and the ring tracks it. aria-valuenow follows the same signal, so assistive tech stays in step.

Preview

35%

Code

<c-lbr.signals $upload.pct="35" />

<div class="flex flex-col items-start gap-4 w-full md:w-96">

    <c-lb.radial-progress value="$upload.pct:35" variant="primary" progressSize="6rem">
        <span data-text="$upload.pct + '%'">35%</span>
    </c-lb.radial-progress>

    <c-lb.range bind="$upload.pct" min="0" max="100" variant="primary" class="w-full" />

</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)