Tailwind CSS Radial progress

Class Name	Type	Description
radial-progress	Component	Base class for radial progress component.

Utilize the radial-progress component class and adjust the progress value by setting the CSS variable --value:* in the style attribute of the radial progress component, where * represents a numerical value.

With values

Embed a value in the radial progress component markup to visualize the progress accordingly.

<div class="radial-progress" style="--value:0;" role="progressbar">0%</div>
<div class="radial-progress" style="--value:20;" role="progressbar">20%</div>
<div class="radial-progress" style="--value:60;" role="progressbar">60%</div>
<div class="radial-progress" style="--value:80;" role="progressbar">80%</div>
<div class="radial-progress" style="--value:100;" role="progressbar">100%</div>

With text

Embed a value & text in the radial progress component markup to visualize the radial progress with text.

<div class="radial-progress" style="--value:60;" role="progressbar">
  <div class="mx-auto">60%</div>
  <span class="text-secondary text-xs">Loss</span>
</div>
<div class="radial-progress" style="--value:80;" role="progressbar">
  <div class="mx-auto">80%</div>
  <span class="text-secondary text-xs">Profit</span>
</div>

Colors

Semantic

Apply the text utility class text-{semantic-color} to the radial progress to style it with semantic colors.

<div class="radial-progress text-neutral" style="--value:70;" role="progressbar">70%</div>
<div class="radial-progress text-primary" style="--value:70;" role="progressbar">70%</div>
<div class="radial-progress text-secondary" style="--value:70;" role="progressbar">70%</div>
<div class="radial-progress text-accent" style="--value:70;" role="progressbar">70%</div>
<div class="radial-progress text-info" style="--value:70;" role="progressbar">70%</div>
<div class="radial-progress text-success" style="--value:70;" role="progressbar">70%</div>
<div class="radial-progress text-warning" style="--value:70;" role="progressbar">70%</div>
<div class="radial-progress text-error" style="--value:70;" role="progressbar">70%</div>

With background

Utilize the provided examples to implement radial progress with semantic background colors.

<div class="radial-progress bg-neutral text-neutral-content border-neutral border-4" style="--value:70;" role="progressbar">70%</div>
<div class="radial-progress bg-primary text-primary-content border-primary border-4" style="--value:70;" role="progressbar">70%</div>
<div class="radial-progress bg-secondary text-secondary-content border-secondary border-4"style="--value:70;"role="progressbar">70%</div>
<div class="radial-progress bg-accent text-accent-content border-accent border-4" style="--value:70;" role="progressbar">70%</div>
<div class="radial-progress bg-info text-info-content border-info border-4" style="--value:70;" role="progressbar">70%</div>
<div class="radial-progress bg-success text-success-content border-success border-4" style="--value:70;" role="progressbar">70%</div>
<div class="radial-progress bg-warning text-warning-content border-warning border-4" style="--value:70;" role="progressbar">70%</div>
<div class="radial-progress bg-error text-error-content border-error border-4" style="--value:70;" role="progressbar">70%</div>

With soft background

Utilize the provided examples to implement radial progress with soft semantic background colors.

<div class="radial-progress bg-neutral/10 text-nuetral border-4 border-transparent" style="--value:70;" role="progressbar">70%</div>
<div class="radial-progress bg-primary/10 text-primary border-4 border-transparent" style="--value:70;" role="progressbar">70%</div>
<div class="radial-progress bg-secondary/10 text-secondary border-4 border-transparent" style="--value:70;" role="progressbar">70%</div>
<div class="radial-progress bg-accent/10 text-accent border-4 border-transparent" style="--value:70;" role="progressbar">70%</div>
<div class="radial-progress bg-info/10 text-info border-4 border-transparent" style="--value:70;" role="progressbar">70%</div>
<div class="radial-progress bg-success/10 text-success border-4 border-transparent" style="--value:70;" role="progressbar">70%</div>
<div class="radial-progress bg-warning/10 text-warning border-4 border-transparent" style="--value:70;" role="progressbar">70%</div>
<div class="radial-progress bg-error/10 text-error border-4 border-transparent" style="--value:70;" role="progressbar">70%</div>

Sizes

Custom size & thickness

Modify the size and thickness of the progress by defining the CSS variables --size:* and --thickness:* within the style attribute of the radial progress component, where * denotes a numerical value along with the unit.

<div class="radial-progress" style="--value:70; --size:12rem; --thickness: 2px;" role="progressbar">70%</div>
<div class="radial-progress" style="--value:70; --size:12rem; --thickness: 2rem;" role="progressbar">70%</div>
<div class="radial-progress bg-primary/10 text-primary border-4 border-transparent" style="--value:70; --size:12rem; --thickness: 1rem;" role="progressbar">70%</div>

FlyonUI

Tailwind CSS Radial progress

Variants

Default