ProgressCircle KIT

Examples API Setup
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.