ProgressCircle KIT

Examples API Setup
Source code
See also
ProgressBar, ProgressSegmented, Loader
<tui-progress-circle />
is a component to visually represent the completion of a process or operation (as a partially filled circle/ring). It shows how much has been completed and how much remains.

Basic

#

Sizes

#

With label

#

Colors

#

Dynamic color

#

Anti-clockwise direction

#

Use power of CSS property transform to customize direction and starting point of progress circle.

By default, ProgressCircle has clockwise direction and starts from the top (i.e. it already contains transform: rotate(-90deg) ).

Thickness

#

Use css-variable --tui-thickness to customize width of the circle's stroke.

Arc mode

#

Set arc attribute to transform default circular shape into arc with small bottom open arc sector (gap between arc ends).