Generator spinera CSS do nakładki

Dwie części: spinner i nakładka

Generator tworzy spinner: klasę .loader i regułę @keyframes spin. Nakładka to osobne opakowanie, które dodajesz sam. Obejmuje cały obszar widoku i centruje swój element potomny. Taki podział jest przydatny, bo ten sam spinner możesz użyć w przycisku lub karcie, a opakowania potrzebujesz tylko wtedy, gdy trzeba zablokować interfejs.

CSS opakowania

Wklej to po wygenerowanych regułach:

.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="Ładowanie">
  <div class="loader"></div>
</div>

position: fixed z inset: 0 rozciąga warstwę do wszystkich czterech krawędzi ekranu. Ustawienia flex centrują spinner w obu kierunkach. z-index utrzymuje warstwę nad zwykłą treścią, więc zwiększ go, jeśli nagłówek lub okno modalne nadal znajduje się na wierzchu.

Przykryj jeden obszar zamiast całej strony

Jeśli ładuje się tylko karta lub tabela, nadaj jej kontenerowi position: relative, a opakowanie zmień na position: absolute:

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

Reszta strony pozostaje używalna, a przyciemniony zostaje tylko ten panel.

Dobierz kolor nakładki do strony

Na ciemnej stronie zmień też kolor toru #eee we wklejonym CSS spinera, aby pierścień nie świecił zbyt mocno.

Dobre praktyki

• Usuń nakładkę, gdy tylko praca się zakończy, inaczej strona pozostanie zablokowana.
• Używaj jej przy krótkich oczekiwaniach. Przy długich operacjach pokaż tekst wyjaśniający, co się dzieje.
• Nakładka i obsługa fokusu to Twój własny kod. Narzędzie tworzy tylko spinner.

Zablokuj przewijanie strony

Stała nakładka zasłania stronę, ale strona pod nią nadal może się przewijać kółkiem myszy lub dotykiem. Jeśli to ważne, dodaj overflow: hidden; do body, gdy nakładka jest widoczna, i usuń to, gdy nakładka znika. Powiąż regułę z tym samym momentem pokazywania i ukrywania nakładki, aby nigdy nie wypadły z synchronizacji.