ProgressBar KIT

On this page

See also

ProgressCircle, ProgressSegmented, Loader

tuiProgressBar: – attribute component for native html tag <progress /> .

Usage:<progress tuiProgressBar value='40' max='100'></progress> .

Basic

Multicolor

Single color

Use <progress /> 's CSS-property color to set solid color of progress indicator.

With fancy color gradient

Set component's input property color to get more complex color combinations.

Use directive tuiProgressFixedGradient to make gradient fixed.

Multicolor segments

Use tuiProgressColorSegments directive to to get multicolor segments.

Sizes

With label

30%

Stacked progress bars

Indeterminate

Indeterminate state expresses an unspecified amount of wait time.

If there is no [value] attribute, the ProgressBar is indeterminate.

Customizable corners

You can toggle off round corners of the progress bar by setting border-radius: 0 .

GitHub StackBlitz