Taiga UI 5 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 tuiHeader="h6">
            <span tuiTitle>
                <span tuiSubtitle>Done</span>
                <b>{{ value }}%</b>
            </span>
        </span>
        <tui-progress-circle
            size="xl"
            [max]="max"
            [value]="value"
        />
    </label>
}

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. 
    
      
    

      
      
    

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

    

      
      
    

  
    
      tui-progress-circle {
    transform: scaleX(-1);
}

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