Radial Progress

Radial Progress kan vis hvor langt en oppgave har kommet.

20%

50%

70%

80%

<div class="flex flex-col gap-4">
  <div class="radial-progress" style="--value:20;" aria-valuenow="20" role="progressbar">20%</div>
  <div class="radial-progress text-primary" style="--value:50;" aria-valuenow="50" role="progressbar">50%</div>
  <div class="radial-progress text-accent" style="--value:70;" aria-valuenow="70" role="progressbar">70%</div>
  <div class="radial-progress text-warning" style="--value:80;" aria-valuenow="80" role="progressbar">80%</div>
</div>

Farger

70%

<div
  class="radial-progress bg-primary text-primary-content border-primary border-4"
  style="--value:70;" aria-valuenow="70" role="progressbar">
  70%
</div>

Tykkelse

70%

<div class="flex flex-col gap-4">
  <div class="radial-progress" style="--value:70; --size:12rem; --thickness: 2px;" aria-valuenow="70" role="progressbar">70%</div>
  <div class="radial-progress" style="--value:70; --size:12rem; --thickness: 2rem;" aria-valuenow="70" role="progressbar">70%</div>
</div>

Forige Progress

Neste Radio