Loader

The Loader is a visual component that displays a loading animation to indicate that an action or process is in progress.

PreviousNext
import { Component } from '@angular/core';
 
import { ZardLoaderComponent } from '../loader.component';
 
@Component({
  selector: 'z-demo-loader-default',
  imports: [ZardLoaderComponent],
  standalone: true,
  template: `<z-loader />`,
})
export class ZardDemoLoaderDefaultComponent {}

Installation

1

Run the CLI

Use the CLI to add the component to your project. 

npx @ngzard/ui@latest add loader
1

Add the component files

Create the component directory structure and add the following files to your project.

loader.component.ts
loader.component.ts
import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from '@angular/core';
 
import type { ClassValue } from 'clsx';
 
import { loaderVariants, type ZardLoaderVariants } from './loader.variants';
import { mergeClasses } from '../../shared/utils/utils';
 
@Component({
  selector: 'z-loader',
  standalone: true,
  template: `
    <div class="relative top-1/2 left-1/2 h-[inherit] w-[inherit]">
      @for (_ of bars; track $index) {
        <div
          class="animate-spinner absolute -top-[3.9%] -left-[10%] h-[8%] w-[24%] rounded-md bg-black dark:bg-white"
          [style]="{
            animationDelay: animationDelay($index),
            transform: transform($index),
          }"
        ></div>
      }
    </div>
  `,
  styles: `
    @layer utilities {
      @keyframes spinner {
        0% {
          opacity: 1;
        }
        100% {
          opacity: 0.15;
        }
      }
 
      .animate-spinner {
        animation: spinner 1.2s linear infinite;
      }
    }
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  host: {
    '[class]': 'classes()',
  },
  exportAs: 'zLoader',
})
export class ZardLoaderComponent {
  readonly class = input<ClassValue>('');
  readonly zSize = input<ZardLoaderVariants['zSize']>('default');
 
  protected readonly bars = Array.from({ length: 12 });
  protected readonly animationDelay = (index: number) => `-${1.3 - index * 0.1}s`;
  protected readonly transform = (index: number) => `rotate(${30 * index}deg) translate(146%)`;
 
  protected readonly classes = computed(() => mergeClasses(loaderVariants({ zSize: this.zSize() }), this.class()));
}
loader.variants.ts
loader.variants.ts
import { cva, type VariantProps } from 'class-variance-authority';
 
export const loaderVariants = cva('', {
  variants: {
    zSize: {
      default: 'size-6',
      sm: 'size-4',
      lg: 'size-8',
    },
  },
  defaultVariants: {
    zSize: 'default',
  },
});
export type ZardLoaderVariants = VariantProps<typeof loaderVariants>;

Examples

default

import { Component } from '@angular/core';
 
import { ZardLoaderComponent } from '../loader.component';
 
@Component({
  selector: 'z-demo-loader-default',
  imports: [ZardLoaderComponent],
  standalone: true,
  template: `<z-loader />`,
})
export class ZardDemoLoaderDefaultComponent {}

size

import { Component } from '@angular/core';
 
import { ZardLoaderComponent } from '../loader.component';
 
@Component({
  selector: 'z-demo-loader-size',
  imports: [ZardLoaderComponent],
  standalone: true,
  template: `
    <z-loader zSize="sm" />
    <z-loader zSize="default" />
    <z-loader zSize="lg" />
  `,
})
export class ZardDemoLoaderSizeComponent {}

API

[z-loader] Component

z-loader is a component that provides a loading animation.

To customize the loader, pass the following props to the component.

Property Description Type Default
[zSize] Loader size default | sm | lg default