Brainleaf
Web Resources
CSS3

I loader o spinner sono ormai irrinunciabili e per realizzarli esistono diversi modi. In questo articolo vedremo come costruire ed animare un loader in puro CSS, senza neppure una riga di javascript.

Per iniziare, inseriamo il markup necessario:


<div class="spinner">
    <div class="spinner-inner"></div>
</div>

Passiamo quindi alla stesura del css. Principalmente quello che si deve fare è creare due quadrati concentrici che verrano poi trasformati in due cerchi. La tecnica per far questo consiste nel posizionare il div parent come relative e il child come absolute in modo che assumano la posizione concentrica. Assegnamo poi un bordo all'elemento parent che avrà la funzione di fare da background alla porzione di bordo che verrà animata. Il bordo dell'elemento child sarà invece colorato soltanto in uno a scelta dei quattro lati. Il div child sarà poi animato attraverso un'animazione css.


.spinner {
    position: relative;
    width: 50px;
    height: 50px;
    border: 5px solid #efefef;
    border-radius: 50%;
  }

  .spinner-inner {
    position: absolute;
    top: -5px;
    right: -5px;
    bottom: -5px;
    left: -5px;
    border-radius: 50%;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
    border-radius: 50%;
    animation: infinite-spinning 1s infinite;
  }

  @keyframes infinite-spinning {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

Come vedete la tecnica è molto semplice e facilmente replicabile. Ovviamente avremo comunque necessità di utilizzare del codice javascript per far comparire e/o scomparire il loader, ma utilizzare questo tipo di animazione piuttosto che una javascript aiuterà non poco nel far risparmiare risorse alla device che visualizzera il loader.

Joomla SEF URLs by Artio