Radial Progress Bars

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%

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

JavaScript Animation

The radial progress component animates smoothly when the value changes. Here's a simple JavaScript example that automatically changes to a random percentage between 8% and 100% every 1.5 seconds:

Preview

50%

Code

.flex.flex-col.items-center.gap-4
  #animated-radial{class: "radial-progress", style: "--value: 50; --size: 8rem; --thickness: 8px;", role: "progressbar"}
    50%

:javascript
  // Use window property to avoid redeclaration errors and allow cross-navigation access
  if (window.radialInterval) {
    clearInterval(window.radialInterval);
  }

  function updateRadial(value) {
    const radial = document.getElementById('animated-radial');

    if (!radial) {
      clearInterval(window.radialInterval);
      return;
    }

    radial.style.setProperty('--value', value);
    radial.textContent = value + '%';
  }

  function getRandomPercentage() {
    return Math.floor(Math.random() * (100 - 8 + 1)) + 8;
  }

  function animateRadial() {
    const newValue = getRandomPercentage();
    updateRadial(newValue);
  }

  // Start the animation
  window.radialInterval = setInterval(animateRadial, 1500);

Radial Progress Bars

Basic Radials

Fancy Radials

Controlling Size & Color

JavaScript Animation

Docs

Guides

Hero

Daisy