Taiga UI 5.0 is out!

ProgressBar KIT

Examples API GitHub

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 

    
      
    

      
      
    

  
    
      <progress
    max="100"
    tuiProgressBar
    [value]="value$ | async"
></progress>

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. 

    
      
    

      
      
    

  
    
      <h6 class="description">Single color</h6>
<p>
    Use
    <code [textContent]="'<progress />'"></code>
    's CSS-property
    <code>color</code>
    to set solid color of progress indicator.
</p>

<progress
    max="100"
    tuiProgressBar
    class="progress"
    [value]="fastValue$ | async"
></progress>

<h6 class="description">With fancy color gradient</h6>
<p>
    Set component's input property
    <code>color</code>
    to get more complex color combinations.
</p>

<progress
    color="linear-gradient(to right, var(--tui-chart-categorical-02), var(--tui-chart-categorical-14), var(--tui-chart-categorical-12))"
    max="100"
    tuiProgressBar
    class="progress"
    [value]="fastValue$ | async"
></progress>

<p>
    Use directive
    <code>tuiProgressFixedGradient</code>
    to make gradient fixed.
</p>

<progress
    color="linear-gradient(to right, var(--tui-chart-categorical-02), var(--tui-chart-categorical-14), var(--tui-chart-categorical-12))"
    max="100"
    tuiProgressBar
    tuiProgressFixedGradient
    class="progress"
    [value]="fastValue$ | async"
></progress>

<h6 class="description">Multicolor segments</h6>
<p>
    Use
    <code>tuiProgressColorSegments</code>
    directive to to get multicolor segments.
</p>

<progress
    max="100"
    tuiProgressBar
    class="progress"
    [tuiProgressColorSegments]="colors"
    [value]="fastValue$ | async"
></progress>

<progress
    tuiProgressBar
    class="progress"
    [max]="colors.length"
    [tuiProgressColorSegments]="colors"
    [value]="slowValue$ | async"
></progress>

    

      
      
    

  
    
      .progress {
    margin-block-end: 1rem;
    color: var(--tui-chart-categorical-09);
}

.description {
    font: var(--tui-typography-heading-h6);
    margin-block-end: 1rem;

    &:first-child {
        margin-block-start: 0;
    }
}

Sizes 

    
      
    

      
      
    

  
    
      <progress
    max="100"
    size="xs"
    tuiProgressBar
    [value]="55"
></progress>

<progress
    max="100"
    size="s"
    tuiProgressBar
    [value]="60"
></progress>

<progress
    max="100"
    size="m"
    tuiProgressBar
    [value]="65"
></progress>

<progress
    max="100"
    size="l"
    tuiProgressBar
    [value]="70"
></progress>

<progress
    max="100"
    size="xl"
    tuiProgressBar
    [value]="75"
></progress>

<progress
    max="100"
    size="xxl"
    tuiProgressBar
    [value]="80"
></progress>

    

      
      
    

  
    
      :host {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

With label 

    
      
    

      
      
    

  
    
      @if (value$ | async; as value) {
    <label
        tuiProgressLabel
        class="label-wrapper"
    >
        {{ value }}%
        <progress
            size="l"
            tuiProgressBar
            [max]="max"
            [value]="value"
        ></progress>
    </label>
}

    

      
      
    

  
    
      .label-wrapper {
    inline-size: 100%;
    text-shadow: 0 0 0.25rem #000;
    color: var(--tui-text-primary-on-accent-1);
}

Stacked progress bars 

    
      
    

      
      
    

  
    
      <label
    tuiProgressLabel
    class="label-wrapper"
>
    <progress
        max="4"
        size="s"
        tuiProgressBar
        class="progress"
        [value]="3"
    ></progress>

    <progress
        max="4"
        size="s"
        tuiProgressBar
        class="progress"
        [value]="1"
    ></progress>
</label>

    

      
      
    

  
    
      .label-wrapper {
    inline-size: 100%;
}

.progress {
    &:nth-child(1) {
        color: #a3ecb3;
    }

    &:nth-child(2) {
        color: #39b54a;
    }
}

Indeterminate

Indeterminate state expresses an unspecified amount of wait time.

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

    
      
    

      
      
    

  
    
      <progress tuiProgressBar></progress>

Customizable corners

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

      
      
    

  
    
      <progress
    tuiProgressBar
    [max]="100"
    [value]="50"
></progress>

    

      
      
    

  
    
      [tuiProgressBar] {
    border-radius: 0;
}
GitHub StackBlitz