Taiga UI 5.0 is out!
See what's new
ProgressCircle KIT
On this page
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).
Taiga UI