loading · Casa Hacker DS

overview

01

variantes

02

Spinner

Operação rápida sem tempo conhecido.

Skeleton

Placeholder enquanto conteúdo carrega.

Progress determinado

Quando o tempo é conhecido.

Progress indeterminado

tamanhos

03

modifiers · api

04

prop	tipo	default	descrição
.spinner	class	—	círculo girando 32px
.spinner--sm	class	—	16px
.spinner--lg	class	—	64px
.skeleton	class	—	placeholder shimmer
.progress	class	—	barra de progresso
.progress--indeterminate	class	—	sem porcentagem

quando usar

05

use

Spinner pra <2s sem tempo conhecido
Skeleton pra carregamento de página/lista
Progress pra upload/download com tempo
Skeleton mantém layout estável (sem CLS)

não use

Spinner pra >5s sem feedback adicional
Progress fake (porcentagem aleatória)
Skeleton com forma muito diferente do conteúdo real

acessibilidade

06 · wcag aa

aria-busy="true" no container que está carregando
role="status" e aria-live="polite" pra anunciar mudanças
aria-label="carregando" no spinner
Respeitar prefers-reduced-motion (spin reduzido)

código

07 · html

<!-- spinner -->
<span class="spinner" role="status" aria-label="carregando"></span>

<!-- skeleton -->
<div class="skeleton" style="height: 20px"></div>

<!-- progress -->
<div class="progress">
  <div class="progress-bar" style="width: 60%"></div>
</div>