Carregando

Spinner para a ação que a pessoa disparou e espera, como o botão de salvar; esqueleto para o conteúdo que ainda vai chegar e já tem forma conhecida, como a linha da tabela. O esqueleto evita o salto: o espaço já está reservado com o tamanho do que vem. Só classe, sem JavaScript.

Exemplos

O spinner mede em em e pinta com currentColor, então acompanha o lugar onde está sem variante nenhuma.

Como usar

<button class="tuc-btn is-primary" aria-busy="true" disabled>
  <span class="tuc-spinner"></span> Salvando
</button>

<span class="tuc-spinner is-lg"></span>

<div class="tuc-skeleton" style="width:60%"></div>
<span class="tuc-skeleton is-circle" style="width:36px"></span>

O esqueleto é um bloco de 1em de altura e da largura toda: a largura e, quando precisar, a altura são suas. Não escreva spinner à mão, com SVG ou borda própria — o toast de carregando e os componentes usam este.

Com o HTMX

htmx-indicator é a classe do próprio HTMX: escondida, e visível só durante a requisição. Junto do spinner, ele aparece e some sem uma linha de JavaScript.

<button class="tuc-btn is-primary" hx-post="{% url 'contract-save' contract.pk %}" hx-disabled-elt="this">
  <span class="tuc-spinner htmx-indicator"></span> Salvar
</button>

O esqueleto serve de conteúdo provisório para o que o HTMX vai buscar logo que a página abre. Quando a resposta chega, ela substitui o esqueleto no mesmo espaço, e nada pula.

<div hx-get="{% url 'customers-table' %}" hx-trigger="load" hx-swap="outerHTML">
  <span class="tuc-skeleton" style="width:60%"></span>
  <span class="tuc-skeleton" style="width:80%; margin-top:8px"></span>
</div>

Acessibilidade

O texto diz o que está acontecendo, e o spinner confirma. "Salvando" ao lado do spinner é anunciado; um spinner sozinho é um círculo girando para quem não vê.

O esqueleto é decoração: não seleciona texto, não recebe ponteiro e seu texto, se houver, fica transparente. Com prefers-reduced-motion o brilho do esqueleto para de vez, porque é só enfeite. O spinner continua girando, mais devagar: parado, ele deixaria de dizer "esperando" e viraria um círculo qualquer.

Classes