Radial Progress

Circular progress indicators showing completion percentage

For radial progress we use <div> instead of <progress> tag because Browsers are unable to show the text inside <progress> tag and Firefox doesn't show the pseudo elements inside <progress> bar at all. For accessibility, a role of 'progressbar' is given to each <div> explicitly, while <progress> receives this role implicitly.

Basic

Basic Usage

Preview Code Auto

70%

Div('70%',
    style='--value:70;',
    role='progressbar',
    cls='radial-progress'
)

Values

Preview Code Auto

20%

60%

80%

100%

Div('0%', style='--value:0;', role='progressbar', cls='radial-progress'),
Div('20%', style='--value:20;', role='progressbar', cls='radial-progress'),
Div('60%', style='--value:60;', role='progressbar', cls='radial-progress'),
Div('80%', style='--value:80;', role='progressbar', cls='radial-progress'),
Div('100%', style='--value:100;', role='progressbar', cls='radial-progress')

Customization

Color Customization

Preview Code Auto

70%

Div('70%', style='--value:70;', role='progressbar', cls='radial-progress text-primary')

Background Customization

Preview Code Auto

70%

Div('70%', style='--value:70;', role='progressbar', cls='radial-progress bg-primary text-primary-content border-primary border-4')

Size and Thickness

Preview Code Auto

70%

Div('70%', style='--value:70; --size:12rem; --thickness: 2px;', role='progressbar', cls='radial-progress'),
Div('70%', style='--value:70; --size:12rem; --thickness: 2rem;', role='progressbar', cls='radial-progress')

Class Reference

Class	Type	Description
radial-progress	Base component class

Do you have a question? ask the community

Do you see a bug? open an issue on GitHub

LLMs Context: Full Markdown | This Component

Resources: DaisyUI | TailwindCSS | FastHTML Repo