Taiga UI 5.0 is out!

Loader CORE

Examples API GitHub

On this page

See also

ProgressBar, ProgressCircle, ProgressSegmented

With inherited background color

I don't know who you are. I don't know what you want. If you are looking for ransom, I can tell you I don't have money. But what I do have are a very particular set of skills; skills I have acquired over a very long career. Skills that make me a nightmare for people like you. If you let my daughter go now, that'll be the end of it. I will not look for you, I will not pursue you. But if you don't, I will look for you, I will find you, and I will kill you. 
    
      
    

      
      
    

  
    
      <tui-loader [inheritColor]="true">
    I don't know who you are. I don't know what you want. If you are looking for ransom, I can tell you I don't have
    money. But what I do have are a very particular set of skills; skills I have acquired over a very long career.
    Skills that make me a nightmare for people like you. If you let my daughter go now, that'll be the end of it. I will
    not look for you, I will not pursue you. But if you don't, I will look for you, I will find you, and I will kill
    you.
</tui-loader>

    

      
      
    

  
    
      :host {
    display: block;
    background: var(--tui-background-accent-1);
    box-shadow: 0 0 0 100rem var(--tui-background-accent-1);
    color: var(--tui-text-primary-on-accent-1);
}

With content overlay

I don't know who you are. I don't know what you want. If you are looking for ransom, I can tell you I don't have money. But what I do have are a very particular set of skills; skills I have acquired over a very long career. Skills that make me a nightmare for people like you. If you let my daughter go now, that'll be the end of it. I will not look for you, I will not pursue you. But if you don't, I will look for you, I will find you, and I will kill you. 
    
      
    

      
      
    

  
    
      <tui-loader [overlay]="true">
    I don't know who you are. I don't know what you want. If you are looking for ransom, I can tell you I don't have
    money. But what I do have are a very particular set of skills; skills I have acquired over a very long career.
    Skills that make me a nightmare for people like you. If you let my daughter go now, that'll be the end of it. I will
    not look for you, I will not pursue you. But if you don't, I will look for you, I will find you, and I will kill
    you.
</tui-loader>

    

      
      
    

  
    
      :host {
    display: block;
    background: #3e4757;
    box-shadow: 0 0 0 100rem #3e4757;
    color: var(--tui-background-base);
}

Options

This example demonstrates how to configure loader options using tuiLoaderOptionsProvider. The loader is configured with size 'l', overlay enabled, and inheritColor disabled. 
    
      
    

      
      
    

  
    
      <tui-loader>
    This example demonstrates how to configure loader options using tuiLoaderOptionsProvider. The loader is configured
    with size 'l', overlay enabled, and inheritColor disabled.
</tui-loader>

    

      
      
    

  
    
      .inline-flex {
    display: inline-flex;
}

Custom stroke width

Use css-variable --tui-thickness to customize width of the circle stroke. By default, it is 1/12 of diameter. 
    
      
    

      
      
    

  
    
      <tui-loader />
<tui-loader />
<tui-loader />

    

      
      
    

  
    
      tui-loader {
    min-inline-size: 3.5rem;

    &:nth-child(1) {
        /**
        Don't use `rem` units if you support Safari.
        Safari doesn't support `rem` units for `stroke-*` properties of `<circle />`.
        Use `em` units => they will be interpreted as `rem` ones
        (`<circle />` has `font-size: 1rem`).
        Or just use simple `px` units.
        */
        --tui-thickness: 0.125em;
    }

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

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

:host {
    display: flex;
    gap: 2rem;
}
GitHub StackBlitz