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. Preview HTML TypeScript More Edit
Preview HTML TypeScript LESS More Edit
Preview HTML TypeScript LESS More Edit
Preview HTML TypeScript LESS More Edit
Preview HTML TypeScript LESS More Edit
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)
).
Preview HTML TypeScript LESS More Edit
Use css-variable --tui-thickness
to customize width of the circle's stroke. Preview HTML TypeScript LESS More Edit