Gerador de CSS para spinner de sobreposição

Duas partes: o spinner e a sobreposição

O gerador produz o spinner: a classe .loader e a regra @keyframes spin. A sobreposição é um contêiner separado que você adiciona. Ela cobre a janela inteira e centraliza o seu filho. Essa separação é útil porque você pode reutilizar o mesmo spinner em um botão ou em um card e usar o contêiner somente quando precisar de um estado que bloqueia a tela.

CSS do contêiner

Cole isto depois das regras geradas:

.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.75);
  z-index: 1000;
}

<div class="overlay" role="status" aria-label="Carregando">
  <div class="loader"></div>
</div>

position: fixed com inset: 0 estica a camada até as quatro bordas da tela. As configurações de flex centralizam o spinner nos dois sentidos. O z-index mantém a camada acima do conteúdo comum, então aumente-o se um cabeçalho ou um modal ainda aparecer por cima.

Cobrir só uma área em vez da página

Se apenas um card ou uma tabela estiver carregando, dê ao contêiner dele position: relative e troque o contêiner da sobreposição para position: absolute:

.panel { position: relative; }
.panel .overlay { position: absolute; }

O restante da página continua utilizável, e só esse painel fica escurecido.

Escolha a cor da sobreposição conforme a página

Em uma página escura, altere também a cor da trilha #eee no CSS do loader colado, para que o anel não brilhe em excesso.

Boas práticas

• Remova a sobreposição assim que o trabalho terminar, ou a página continuará bloqueada.
• Use-a para esperas curtas. Para operações longas, mostre um texto explicando o que está acontecendo.
• A marcação da sobreposição e o controle do foco são responsabilidade sua. Esta ferramenta gera apenas o spinner.

Impeça a página de rolar

Uma sobreposição fixa oculta a página, mas o conteúdo por trás dela ainda pode rolar com a roda do mouse ou com o toque. Se isso importar, adicione overflow: hidden; ao body enquanto a sobreposição estiver visível e remova-o quando ela sair. Mantenha a regra vinculada ao mesmo momento em que você mostra e oculta a sobreposição, para que os dois nunca saiam de sincronia.