Taiga UI 5.0 is out!

ProgressCircle KIT

Examples API GitHub

On this page

See also

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.

Basic 

    
      
    

      
      
    

  
    
      <tui-progress-circle
    size="xl"
    [max]="max"
    [value]="(value$ | async) || 0"
/>

Sizes 

    
      
    

      
      
    

  
    
      @for (size of sizes; track size) {
    <tui-progress-circle
        [max]="100"
        [size]="size"
        [value]="60"
    />
}

    

      
      
    

  
    
      @import '@taiga-ui/styles/utils.less';

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

    @media @tui-desktop-min {
        flex-direction: row-reverse;
    }
}

With label 

    
      
    

      
      
    

  
    
      @if (value$ | async; as value) {
    <label tuiProgressLabel>
        <span class="text">COMPLETED</span>
        <span class="percent">{{ value }}%</span>
        <tui-progress-circle
            size="xl"
            [max]="max"
            [value]="value"
        />
    </label>
}

    

      
      
    

  
    
      .text {
    font: var(--tui-typography-body-s);
    color: var(--tui-text-tertiary);
}

.percent {
    font: var(--tui-typography-heading-h6);
}

Colors 

    
      
    

      
      
    

  
    
      <tui-progress-circle
    color="url(#gradient)"
    size="xl"
    [max]="4"
    [value]="3"
/>

<tui-progress-circle
    size="l"
    class="progress"
    [max]="4"
    [value]="3"
/>

<tui-progress-circle
    size="m"
    class="progress"
    [max]="4"
    [value]="3"
/>

<tui-progress-circle
    size="s"
    class="progress"
    [max]="4"
    [value]="3"
/>

<svg
    height="0"
    width="0"
>
    <defs>
        <linearGradient
            id="gradient"
            gradientTransform="rotate(95)"
        >
            <stop
                offset="0%"
                stop-color="var(--tui-chart-categorical-02)"
            />
            <stop
                offset="45%"
                stop-color="var(--tui-chart-categorical-14)"
            />
            <stop
                offset="100%"
                stop-color="var(--tui-chart-categorical-12)"
            />
        </linearGradient>
    </defs>
</svg>

    

      
      
    

  
    
      :host {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.progress {
    &[data-size='l'] {
        color: var(--tui-chart-categorical-01);
    }

    &[data-size='m'] {
        color: var(--tui-chart-categorical-03);
    }

    &[data-size='s'] {
        color: var(--tui-chart-categorical-09);
    }
}

Dynamic color 

    
      
    

      
      
    

  
    
      <tui-progress-circle
    size="xl"
    [max]="max"
    [style.color]="color$ | async"
    [value]="(value$ | async) || 0"
/>

    

      
      
    

  
    
      tui-progress-circle {
    transition: color 2s;
}

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) ). 

    
      
    

      
      
    

  
    
      <tui-progress-circle
    size="xl"
    [max]="max"
    [value]="(value$ | async) || 0"
/>

    

      
      
    

  
    
      tui-progress-circle {
    transform: scaleX(-1) // reversed direction
        rotate(-90deg); // top side starting point
}

Thickness

Use css-variable --tui-thickness to customize width of the circle's stroke. 
    
      
    

      
      
    

  
    
      @for (_ of '-'.repeat(4); track $index) {
    <tui-progress-circle
        size="l"
        [max]="100"
        [value]="60"
    />
}

    

      
      
    

  
    
      @import '@taiga-ui/styles/utils.less';

tui-progress-circle {
    &:nth-child(1) {
        --tui-thickness: 0.125rem;
    }

    &:nth-child(2) {
        --tui-thickness: 0.25rem;
    }

    &:nth-child(3) {
        --tui-thickness: 0.375rem;
    }

    &:nth-child(4) {
        --tui-thickness: 0.5rem;
    }
}

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

    @media @tui-desktop-min {
        flex-direction: row;
    }
}

Arc mode

Set arc attribute to transform default circular shape into arc with small bottom open arc sector (gap between arc ends). 
    
      
    

      
      
    

  
    
      @for (size of sizes; track size) {
    <tui-progress-circle
        arc
        [size]="size"
        [value]="0.5"
    />
}

    

      
      
    

  
    
      @import '@taiga-ui/styles/utils.less';

:host {
    display: flex;
    flex-direction: row-reverse;
    gap: 1rem;

    @media @tui-mobile {
        flex-direction: column;
        margin-block-end: 1rem;
    }
}
GitHub StackBlitz