Run the CLI
Use the CLI to add the component to your project.
npx @ngzard/ui add loaderLoader
The Loader is a visual component that displays a loading animation to indicate that an action or process is in progress.
import { Component } from '@angular/core';
import { ZardLoaderComponent } from '../loader.component';
@Component({
selector: 'z-demo-loader-default',
standalone: true,
imports: [ZardLoaderComponent],
template: `<z-loader />`,
})
export class ZardDemoLoaderDefaultComponent {}
Installation
Add the component files
Create the component directory structure and add the following files to your project.
loader.component.tsimport { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from '@angular/core';
import type { ClassValue } from 'clsx';
import { mergeClasses } from '../../shared/utils/utils';
import { loaderVariants, type ZardLoaderVariants } from './loader.variants';
@Component({
selector: 'z-loader',
exportAs: 'zLoader',
standalone: true,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
template: `
<div class="relative left-1/2 top-1/2 h-[inherit] w-[inherit]">
@for (_ of bars; track $index) {
<div
class="absolute -left-[10%] -top-[3.9%] h-[8%] w-[24%] animate-spinner 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;
}
}
`,
host: {
'[class]': 'classes()',
},
})
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.tsimport { 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',
standalone: true,
imports: [ZardLoaderComponent],
template: `<z-loader />`,
})
export class ZardDemoLoaderDefaultComponent {}
size
import { Component } from '@angular/core';
import { ZardLoaderComponent } from '../loader.component';
@Component({
selector: 'z-demo-loader-size',
standalone: true,
imports: [ZardLoaderComponent],
template: `
<z-loader zSize="sm" />
<z-loader zSize="default" />
<z-loader zSize="lg" />
`,
})
export class ZardDemoLoaderSizeComponent {}