Ivorie

Spinner

An inline spinning loader.

import { … } from '@inlaylab/ivorie/spinner'
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IvSpinner } from '@inlaylab/ivorie/spinner';

@Component({
  selector: 'demo-spinner',
  imports: [IvSpinner],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <iv-spinner />
  `,
})
export default class SpinnerDemo {}

Installation

CLInpm
npx ivorie add spinner

Wraps the Lucide LoaderCircle icon.

Usage

import { IvSpinner } from '@inlaylab/ivorie/spinner';
<iv-spinner></iv-spinner>

Examples

Size and colour

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IvSpinner } from '@inlaylab/ivorie/spinner';

@Component({
  selector: 'demo-spinner-size',
  imports: [IvSpinner],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="flex items-center gap-4">
      <iv-spinner [size]="16" />
      <iv-spinner [size]="24" class="text-primary" />
      <iv-spinner [size]="32" class="text-muted-foreground" label="Saving" />
    </div>
  `,
})
export default class SpinnerSizeDemo {}

In a button

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IvSpinner } from '@inlaylab/ivorie/spinner';
import { IvButton } from '@inlaylab/ivorie/button';

@Component({
  selector: 'demo-spinner-button',
  imports: [IvSpinner, IvButton],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <button ivButton disabled>
      <iv-spinner label="Saving" />
      Saving
    </button>
  `,
})
export default class SpinnerButtonDemo {}

API

Every part also accepts class.

iv-spinner

Name Type Default Description
size number 16 Icon size in px.
label string 'Loading' Accessible name, set as aria-label.

Accessibility

role="status" with aria-label from label. The icon itself is aria-hidden. Set label to something specific, such as "Saving".