Spinner

A loading indicator component to show pending states.

Import

import { AvSpinnerComponent } from '@avesra/angular';

Usage

import { Component } from '@angular/core';
import { AvSpinnerComponent } from '@avesra/angular';

@Component({
  selector: 'app-spinner-basic-demo',
  imports: [AvSpinnerComponent],
  host: { class: 'block' },
  template: `<div class="flex items-center gap-4">
      <span av-spinner></span>
    </div>`,
})
export class SpinnerBasicDemo {}

Anatomy

Import the Spinner and apply it with the span[av-spinner] attribute selector. Optional size and color inputs control appearance.

<span av-spinner></span>

<!-- With size and color -->
<span av-spinner size="lg" color="success"></span>

Colors

Current

Accent

Success

Warning

Danger

import { Component } from '@angular/core';
import { AvSpinnerComponent } from '@avesra/angular';

@Component({
  selector: 'app-spinner-colors-demo',
  imports: [AvSpinnerComponent],
  host: { class: 'block' },
  template: `<div class="flex items-center gap-8">
      <div class="flex flex-col items-center gap-2">
        <span av-spinner color="current"></span>
        <span class="text-xs text-muted">Current</span>
      </div>
      <div class="flex flex-col items-center gap-2">
        <span av-spinner color="accent"></span>
        <span class="text-xs text-muted">Accent</span>
      </div>
      <div class="flex flex-col items-center gap-2">
        <span av-spinner color="success"></span>
        <span class="text-xs text-muted">Success</span>
      </div>
      <div class="flex flex-col items-center gap-2">
        <span av-spinner color="warning"></span>
        <span class="text-xs text-muted">Warning</span>
      </div>
      <div class="flex flex-col items-center gap-2">
        <span av-spinner color="danger"></span>
        <span class="text-xs text-muted">Danger</span>
      </div>
    </div>`,
})
export class SpinnerColorsDemo {}

Sizes

Small

Medium

Large

Extra Large

import { Component } from '@angular/core';
import { AvSpinnerComponent } from '@avesra/angular';

@Component({
  selector: 'app-spinner-sizes-demo',
  imports: [AvSpinnerComponent],
  host: { class: 'block' },
  template: `<div class="flex items-center gap-8">
      <div class="flex flex-col items-center gap-2">
        <span av-spinner size="sm"></span>
        <span class="text-xs text-muted">Small</span>
      </div>
      <div class="flex flex-col items-center gap-2">
        <span av-spinner size="md"></span>
        <span class="text-xs text-muted">Medium</span>
      </div>
      <div class="flex flex-col items-center gap-2">
        <span av-spinner size="lg"></span>
        <span class="text-xs text-muted">Large</span>
      </div>
      <div class="flex flex-col items-center gap-2">
        <span av-spinner size="xl"></span>
        <span class="text-xs text-muted">Extra Large</span>
      </div>
    </div>`,
})
export class SpinnerSizesDemo {}

Styling

Passing Tailwind CSS classes

Pass utility classes on the spinner host — span[av-spinner].

import { Component } from '@angular/core';
import { AvSpinnerComponent } from '@avesra/angular';

@Component({
  selector: 'app-spinner-custom-styling-demo',
  imports: [AvSpinnerComponent],
  host: { class: 'block' },
  template: `<div class="flex items-center gap-4 rounded-xl border border-border bg-surface px-5 py-4">
  <span av-spinner class="text-accent" size="sm"></span>
  <span av-spinner class="text-muted" size="md"></span>
  <span av-spinner class="text-success" size="lg"></span>
</div>`,
})
export class SpinnerCustomStylingDemo {}

Customizing the component classes

To customize the Spinner classes, use the @layer components directive. Learn more.

@layer components {
  .av-spinner {
    @apply animate-spin;
  }

  .av-spinner--accent {
    color: var(--av-accent);
  }
}

Avesra follows the BEM methodology so component variants and states stay reusable and easy to customize.

CSS Classes

The Spinner component uses these CSS classes:

Base & Size Classes

.av-spinner — Base spinner styles with default size
.av-spinner--sm — Small size variant
.av-spinner--md — Medium size variant (default)
.av-spinner--lg — Large size variant
.av-spinner--xl — Extra large size variant

Color Classes

.av-spinner--current — Inherits current text color
.av-spinner--accent — Accent color variant
.av-spinner--danger — Danger color variant
.av-spinner--success — Success color variant
.av-spinner--warning — Warning color variant

API

Props for span[av-spinner].

Prop	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Size of the spinner (av-spinner).
`color`	`'current' \| 'accent' \| 'success' \| 'warning' \| 'danger'`	`'accent'`	Color variant of the spinner (av-spinner).