ProgressBar KIT

Examples API Setup
Source code
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

#

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 .