Componente

Spinner

Um indicador de carregamento. Escolha a variante de ícone giratório ou de doze barras, dimensione-o, troque o ícone, congele o giro, e colora-o com uma classe de texto. Herda a cor de texto atual, funcionando dentro de botões e texto.

Tamanhos

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 {}

Barras, cor, ícone e estático

Em botões e inline

Loading photos…

Referência de API

hb-spinner

Propriedade	Descrição	Tipo	Padrão
[hbVariant]	Um ícone giratório, ou doze barras que esmaecem.	'icon' \| 'bars'	'icon'
[hbSize]	As dimensões do spinner.	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'	'md'
[hbIcon]	O nome do ícone para a variante de ícone.	string	'phosphorSpinnerGap'
[hbSpin]	Alterna a rotação da variante de ícone.	boolean	true
[hbLabel]	O rótulo acessível anunciado durante o carregamento.	string	'Loading'
[class]	Classes extras — use uma cor text-* para tingir o spinner.	ClassValue	''