Começar

Ideias

Exemplos

Fundamentos

Componentes

Padrões

Marca
Começar
Aparência

Vale na hora e fica lembrado neste navegador.

Componentes

Giro

Um desenho só, para esperar: no botão, perto do controle, ou no meio de uma região. Sempre com texto.

Quando não usar

  • giro sozinho, sem texto
  • esqueleto (placeholder)

Tamanhos e cores

claro

escuro

html
<p class="site-row" style="color:var(--hibex-text)"><span class="hx-spinner" aria-hidden="true"></span><span class="hx-spinner hx-spinner-lg" aria-hidden="true"></span><span class="hx-spinner hx-spinner-xl" aria-hidden="true"></span></p>
<p class="site-row"><span class="hx-spinner hx-spinner-lg hx-spinner-primary" aria-hidden="true"></span><span class="hx-spinner hx-spinner-lg hx-spinner-success" aria-hidden="true"></span><span class="hx-spinner hx-spinner-lg hx-spinner-warning" aria-hidden="true"></span><span class="hx-spinner hx-spinner-lg hx-spinner-danger" aria-hidden="true"></span><span class="hx-spinner hx-spinner-lg hx-spinner-muted" aria-hidden="true"></span></p>
Do texto (1 em), -lg (24 px), -xl (40 px); a cor do texto em volta, ou -primary, -success, -warning, -danger, -muted.

Nos botões

claro
escuro
html
<div class="hx-actions">
  <button class="hx-button hx-button-primary" type="button" disabled aria-busy="true"><span class="hx-spinner" aria-hidden="true"></span>Publicando…</button>
  <button class="hx-button" type="button" disabled aria-busy="true"><span class="hx-spinner" aria-hidden="true"></span>Carregando…</button>
  <button class="hx-button hx-button-danger-solid" type="button" disabled aria-busy="true"><span class="hx-spinner" aria-hidden="true"></span>Recusando…</button>
</div>
Dentro do botão, a cor é a do botão.

Sobre o fundo e numa região

claro

Carregando…

Preparando o relatório…

escuro

Carregando…

Preparando o relatório…

html
<p class="hx-loading" role="status" style="animation:none"><span class="hx-spinner" aria-hidden="true"></span>Carregando…</p>
<div class="hx-card site-spin-card"><span class="hx-spinner hx-spinner-xl hx-spinner-primary" aria-hidden="true"></span><p class="hx-meta">Preparando o relatório…</p></div>
Perto do controle que disparou (ADR-0021) ou no centro de um cartão que ainda vai chegar.

Referência

Classe ou atributoPara quê
.hx-spinner + aria-hidden="true"o giro; o texto ao lado diz o que espera
.hx-spinner-lg / -xltamanho
.hx-spinner-primary / -success / -warning / -danger / -mutedcor fora de um botão

Origem: cap. 05 §3.6, cap. 10 §3.4 · ADR-0021, ADR-0038 · desde a versão 0.4.0