Taiga UI 5.0 is out!

ProgressSegmented KIT

Examples API GitHub

On this page

See also

ProgressBar, ProgressCircle, LoaderProgressSegmented is a component to visually represent the completion of a process or operation (as a segmented bar). It shows how much has been completed and how much remains.

Actually, this component is the same ProgressBar processed by css-property mask .

Basic 

    
      
    

      
      
    

  
    
      <progress
    tuiProgressBar
    [max]="5"
    [segments]="5"
    [value]="3"
></progress>

Sizes 

    
      
    

      
      
    

  
    
      <progress
    size="xs"
    tuiProgressBar
    [max]="7"
    [segments]="7"
    [value]="3"
></progress>

<progress
    size="s"
    tuiProgressBar
    [max]="10"
    [segments]="10"
    [value]="6"
></progress>

<progress
    size="m"
    tuiProgressBar
    [max]="5"
    [segments]="5"
    [value]="4"
></progress>

<progress
    size="l"
    tuiProgressBar
    [max]="3"
    [segments]="3"
    [value]="1"
></progress>

<progress
    size="xl"
    tuiProgressBar
    [max]="3"
    [segments]="3"
    [value]="2"
></progress>

<progress
    size="xxl"
    tuiProgressBar
    [max]="3"
    [segments]="3"
    [value]="3"
></progress>

    

      
      
    

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

Colors 

    
      
    

      
      
    

  
    
      <progress
    size="s"
    tuiProgressBar
    class="green"
    [max]="8"
    [segments]="8"
    [value]="6"
></progress>

<progress
    size="s"
    tuiProgressBar
    [max]="arrayColors.length"
    [segments]="arrayColors.length"
    [tuiProgressColorSegments]="arrayColors"
    [value]="arrayColors.length"
></progress>

    

      
      
    

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

.green {
    color: var(--tui-chart-categorical-20);
}

With labels 

    
      
    

      
      
    

  
    
      <progress
    tuiProgressBar
    [max]="5"
    [segments]="5"
    [value]="3"
></progress>

<div class="description tui-space_top-2">
    <label tuiTitle>
        <span tuiSubtitle>Step</span>
        <span>{{ 100500 | tuiAmount: 'RUB' }}</span>
    </label>
    <label tuiTitle>
        <span tuiSubtitle>New apartment</span>
        2 times left
    </label>
</div>

    

      
      
    

  
    
      .description {
    display: flex;
    justify-content: space-between;

    & > *:first-child {
        text-align: start;
    }

    & > *:last-child {
        text-align: end;
    }

    [tuiSubtitle] {
        color: var(--tui-text-secondary);
    }
}

No round corners 

    
      
    

      
      
    

  
    
      <progress
    tuiProgressBar
    [max]="5"
    [segments]="5"
    [value]="3"
></progress>

    

      
      
    

  
    
      [tuiProgressBar]._segmented {
    --tui-segment-gap: 0.25rem;

    border-radius: 0;
    mask-image: linear-gradient(to left, transparent 0 var(--tui-segment-gap), #999 var(--tui-segment-gap) 100%);
}
GitHub StackBlitz