Spinner

Indicadores de carregamento animados disponíveis em três tamanhos. O spinner herda sua cor de currentColor, então voce pode colori-lo definindo color no elemento ou em um pai.Animated loading indicators available in three sizes. The spinner inherits its color from currentColor, so you can tint it by setting color on the element or a parent.

Quando usarWhen to use

Use spinners quandoUse spinners when

Indicando carregamento indeterminado: dentro de buttons durante ações assincronas, inline em áreas de conteúdo, ou centralizado para estados de carregamento de página inteira.Indicating indeterminate loading: inside buttons during async actions, inline in content areas, or centered for full-page loading states.

Não use spinners quandoDon't use spinners when

A estrutura do conteúdo e conhecida antecipadamente (use Skeleton) ou a espera e muito curta (<300ms) — mostrar um spinner para operações breves causa desconforto.The content structure is known ahead of time (use Skeleton instead) or the wait is very short (<300ms) -- showing a spinner for brief operations feels jarring.

TamanhosSizes

Três tamanhos para diferentes contextos: sm (16px), md (24px), lg (32px).Three sizes to suit different contexts: sm (16px), md (24px), lg (32px).

sm (16px)

md (24px)

lg (32px)

<span class="ds-spinner ds-spinner--sm" role="status" aria-label="Loading"></span>
<span class="ds-spinner" role="status" aria-label="Loading"></span>
<span class="ds-spinner ds-spinner--lg" role="status" aria-label="Loading"></span>

Variantes coloridasColored variants

Defina color no spinner para alterar sua aparencia.Set color on the spinner to change its appearance.

<span class="ds-spinner ds-spinner--md"
      style="color:var(--ds-primary-background-default);"
      role="status" aria-label="Loading"></span>

<span class="ds-spinner ds-spinner--md"
      style="color:var(--ds-feedback-error-background-default);"
      role="status" aria-label="Loading"></span>

Estado de carregamento no buttonButton loading state

Spinners dentro de buttons indicam que uma ação está em andamento. O button não e interativo enquanto carrega.Spinners inside buttons indicate that an action is in progress. The button is non-interactive while loading.

<button class="ds-btn ds-btn--brand ds-btn--loading"
        aria-disabled="true" aria-busy="true">
  <span class="ds-btn__label">Saving</span>
  <span class="ds-btn__spinner">
    <span class="ds-spinner ds-spinner--sm"
          role="status" aria-label="Loading"></span>
  </span>
</button>

Carregamento centralizadoCentered loading

Use um spinner grande centralizado em um container para estados de carregamento de área completa.Use a large spinner centered in a container for full-area loading states.

Loading content...

<div aria-busy="true" style="display:flex;align-items:center;justify-content:center;min-height:160px;">
  <div style="text-align:center;">
    <span class="ds-spinner ds-spinner--lg"
          role="status" aria-label="Loading content"></span>
    <p>Loading content...</p>
  </div>
</div>

Boas práticasBest practices

Show after 300ms delay

Faça

Mostre o spinner após um atraso de 300ms para evitar um flash em operações rapidas.Show the spinner after a 300ms delay to avoid a flash for fast operations.

Não faça

Não substitua uma página inteira por apenas um spinner — use Skeleton placeholders para previsualizar a estrutura do layout.Don't replace an entire page with just a spinner -- use Skeleton placeholders to preview the layout structure.

Mapeamento de tokensToken mapping

PropriedadeProperty	Token (semantic)	Variavel CSSCSS variable
cor (arco ativo)color (active arc)	`semantic.primary.background.default`	`--ds-primary-background-default`
cor (trilha)color (track)	`semantic.border.default`	`--ds-border-default`
duração da animaçãoanimation duration	`foundation.duration.slow`	`--ds-duration-slow`

Classes CSSCSS classes

ClasseClass	DescricaoDescription
`ds-spinner`	Classe base do spinnerBase spinner class
`ds-spinner--sm`	Tamanho pequeno (16px)Small size (16px)
(sem modificador)(no modifier)	Tamanho médio (24px) — padrão na classe base `.ds-spinner`, não há `ds-spinner--md`Medium size (24px) — default on base class `.ds-spinner`, no `ds-spinner--md` modifier exists
`ds-spinner--lg`	Tamanho grande (32px)Large size (32px)

AccessibilityAccessibility

Criterio WCAGWCAG criterion	RequisitoRequirement	Status
4.1.2 Name, Role, Value (A)	`role="status"` + `aria-label="Loading"` em cada spinner`role="status"` + `aria-label="Loading"` on every spinner	✓
2.3.1 Three Flashes (A)	A animação e uma rotacao continua, não piscanteAnimation is a continuous rotation, not flashing	✓
2.3.3 Animation from Interactions (AAA)	Respeita `prefers-reduced-motion` — animação pausada ou desaceleradaRespects `prefers-reduced-motion` -- animation paused or slowed	✓

Resumo dos atributos ARIAARIA attributes summary

role="status" + aria-label="Loading" — obrigatorio em cada spinner para que leitores de tela anunciem o estado de carregamento.
aria-busy="true" — defina no container quando o spinner substitui conteúdo.
prefers-reduced-motion — o CSS do spinner respeita esta media query pausando ou reduzindo a animação.role="status" + aria-label="Loading" — required on every spinner so screen readers announce the loading state.
aria-busy="true" — set on the container when the spinner replaces content.
prefers-reduced-motion — the spinner CSS respects this media query by pausing or reducing animation.