Radial Progress Bars

Radial progress bars are used to indicate the progress of a process, in a circular fasion.

Basic Radials

Radial progress bars utilize a value attribute to set the progress and can have various colors / sizes, along with content inside.

The max is always set to 100 due to the way they are rendered, so value should always be a percentage of the bar that is filled.

Preview

66%

Code

= daisy_radial(value: 66) do
  66%

Fancy Radials

The content doesn't have to be just text!

Preview

52%

😢

Code

= daisy_radial(value: 68) do
  = hero_icon("beaker", css: "size-8 text-primary")

= daisy_radial(value: 52, css: "text-success") do
  52%

= daisy_radial(value: 13, css: "text-error text-3xl") do
  😢

Controlling Size & Color

You can also control the size, thickness, and color of the radial progress.

size defaults to 5rem and must include units
thickness defaults to calc(size / 10) and must include units

Preview

19%

Code

= daisy_radial(value: 19, size: "15rem", thickness: "4px",
  css: "bg-primary text-primary-content text-3xl border-accent border-8") do
  19%

Radial Progress Bars

Basic Radials

Fancy Radials

Controlling Size & Color

Docs

Guides

Hero

Daisy