Na spletnih straneh ali aplikacijah se velikokrat srečamo z različnimi »loaderji« ali slovensko prikazovalniki napredka. Gre za manjše objekte, ki običajno prikazujejo animacijo, ki prikazuje nalaganje informacij oz. podatkov.

Prikazovalnike napredka smo običajno izdelovali s pomočjo grafičnih programov v obliki slik ali s pomočjo JavaScripta. Z razvojem spletnih brskalnikov in vse večjimi zmogljivostmi CSSja pa lahko »loader« izdelamo tudi s pomočjo CSSja.

CSS »loader«

Za izdelavo potrebujemo DIV polje in nekaj CSS atributov, in sicer: border, border-radius, border-top, širino, višino temu pa dodamo še malo CSS animacije za vrtenje. Rezultat je zelo zanimiv.

CSS koda

.loader {
  border: 16px solid #9bd8e6;
  border-radius: 50%;
  border-top: 16px solid #ffffff;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

HTML koda

<div class="loader"></div>

Slabost metode CSS »loaderja« so le v ustrezni podpori v starejših brskalnikih in pri oblikovanju, kjer smo omejeni na oblikovanje CSS atributa »border«. Naš primer si lahko ogledate na https://www.w3schools.com/code/tryit.asp?filename=FFCELOA5JOVN