Components

Radial progress

Radial progress can visually represent either the completion of a task or the elapsed passage of time.

Variants

Default

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.

0%
20%
60%
80%
100%

With text

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

60%
Loss
80%
Profit

Colors

Semantic

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

70%
70%
70%
70%
70%
70%
70%
70%

With background

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

70%
70%
70%
70%
70%
70%
70%
70%

With soft background

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

70%
70%
70%
70%
70%
70%
70%
70%

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.

70%
70%
70%
Class referenceThe component, style, color, state, size and modifier classes available for this component.
ClassTypeDescription
radial-progresscomponentBase class for radial progress component.