Generator för spinner i CSS-overlay

Två delar: spinnern och överlägget

Generatorn tar fram spinnern: klassen .loader och regeln @keyframes spin. Överlägget är ett separat omslag som du lägger till själv. Det täcker hela visningsytan och centrerar sitt underelement. Denna uppdelning är praktisk eftersom du kan återanvända samma spinner i en knapp eller ett kort och bara använda omslaget när du behöver ett blockerande läge.

CSS för omslaget

Klistra in detta efter de genererade reglerna:

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

position: fixed med inset: 0 sträcker lagret till alla fyra kanter av skärmen. Flex-inställningarna centrerar spinnern i båda riktningarna. z-index håller lagret ovanför vanligt innehåll, så höj värdet om en rubrik eller ett modalt fönster fortfarande ligger överst.

Täck ett område i stället för hela sidan

Om bara ett kort eller en tabell laddas ger du dess behållare position: relative och ändrar omslaget till position: absolute:

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

Resten av sidan går fortfarande att använda, och bara den panelen tonas ned.

Välj överläggets färg efter sidan

På en mörk sida ändrar du också banans färg #eee i den inklistrade CSS:en för laddningen, så att ringen inte lyser för starkt.

God praxis

• Ta bort överlägget så snart arbetet är klart, annars blockeras sidan.
• Använd det för korta väntetider. Vid långa åtgärder visar du text som förklarar vad som händer.
• Överlägget och fokushanteringen är din egen markup. Verktyget skapar bara spinnern.

Stoppa sidan från att scrolla

Ett fast överlägg döljer sidan, men sidan bakom kan fortfarande scrollas med hjul eller pekskärm. Om det spelar roll lägger du till overflow: hidden; på body medan överlägget syns och tar bort det när överlägget försvinner. Knyt regeln till samma ögonblick som du visar och döljer överlägget, så att de två aldrig kommer ur synk.