Component

Spinner

A loading indicator. Choose the spinning-icon or twelve-bar variant, size it, swap the icon, freeze the spin, and colour it with a text class. It inherits the current text colour, so it works inside buttons and prose.

Sizes

import { ChangeDetectionStrategy, Component } from '@angular/core';

import { HbSpinnerImports } from '@herbst/ui';

@Component({
  selector: 'hb-demo-spinner-sizes',
  imports: [HbSpinnerImports],
  template: `
    <div class="flex items-center gap-4">
      <hb-spinner hbSize="xs" />
      <hb-spinner hbSize="sm" />
      <hb-spinner hbSize="md" />
      <hb-spinner hbSize="lg" />
      <hb-spinner hbSize="xl" />
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoSpinnerSizesComponent {}

Bars, colour, icon & static

In buttons & inline

Loading photos…

API reference

hb-spinner

Property	Description	Type	Default
[hbVariant]	A spinning icon, or twelve fading bars.	'icon' \| 'bars'	'icon'
[hbSize]	The spinner dimensions.	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'	'md'
[hbIcon]	The icon name for the icon variant.	string	'phosphorSpinnerGap'
[hbSpin]	Toggle the rotation of the icon variant.	boolean	true
[hbLabel]	The accessible label announced while loading.	string	'Loading'
[class]	Extra classes — use a text-* colour to tint the spinner.	ClassValue	''