loading-facebook-css-tutorial-cover

Creiamo insieme il “Loader” di Facebook

3 Luglio 2020 0 Commenti

Buoongiorno ragazzi, finalmente è venerdì e sento odore di tutorial.

Oggi andremo a creare insieme il loading di facebook, vale a dire, le tre barrette che compaiono durante il caricamento dei dati, e per farlo useremo solo e soltanto il CSS.

Come al solito, potete scaricare da QUI il tutorial, oppure vedere la demo QUI.

Iniziamo con il creare un nuovo documento HTML ed inserire un div che chiameremo "loader", con all'interno 3 altri div che saranno le barre:

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Creiamo insieme il "Loading" di Facebook</title>
 </head>
 <body>
  <div class="loader">
   <div class="bar"></div>
   <div class="bar"></div>
   <div class="bar"></div>
  </div>
 </body>
</html>

Benissimo, una volta fatto ciò andremo a creare il css per animare le nostre barre. Anche in questo tutorial, come il precedente, che se ve lo siete perso potrete trovarlo qui, utilizzeremo i keyframes per creare l'animazione:

<style>
/* FACEBOOK LOADER */
.loader {
    width: 40px;
    height: 32px;
}
/* STATO INIZIALE */
.bar {
    background-color: #99aaca;
    border: 1px solid #96a6c9;
    float: left;
    margin-right: 4px;
    margin-top: 6px;
    width: 6px;
    height: 18px;
    /* SETTIAMO LE PROPRIETA' DELL'ANIMAZIONE */
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-name: loadingbar;
}
/*AGGIUNGIAMO UN TEMPO DI RITARDO IN INGLESE DELAY, ALLA SECONDA E TERZA BARRA*/
.loader .bar:nth-child(2) {animation-delay: 0.1s;}
.loader .bar:nth-child(3) {animation-delay: 0.2s;}

/*DEFINIAMO L'ANIMAZIONE "LOADINGBAR"*/
@keyframes loadingbar {
 0% {}
 10% {margin-top:5px;height:22px;border-color:#d1d8e6;background-color:#bac5db;}
 20% {margin-top:0px;height:32px;border-color:#d1d7e2;background-color:#c6ccda;}
 30% {margin-top:1px;height:30px;border-color:#d1d8e6;background-color:#bac5db;}
 40% {margin-top:3px;height:26px;}
 50% {margin-top:5px;height:22px;}
 60% {margin-top:6px;height:18px;}
 70% {}
	/*SE ELIMINATI I FRAME, CAUSERANNO UN ECCESSIVO RITARDO*/
100% {}
}
</style>

Vi sottolineo che il codice scritto è prefix-free, vale a dire che se doveste incontrare problemi con alcuni browser bisogna aggiungere i vari "-webkit-", "-moz-" ecc...

Ecco il codice Completo:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Creiamo insieme il "Loading" di Facebook</title>
<style>
/* FACEBOOK LOADER */
.loader {
    width: 40px;
    height: 32px;
}
/* STATO INIZIALE */
.bar {
    background-color: #99aaca;
    border: 1px solid #96a6c9;
    float: left;
    margin-right: 4px;
    margin-top: 6px;
    width: 6px;
    height: 18px;
    /* SETTIAMO LE PROPRIETA' DELL'ANIMAZIONE */
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-name: loadingbar;
}
/*AGGIUNGIAMO UN TEMPO DI RITARDO IN INGLESE DELAY, ALLA SECONDA E TERZA BARRA*/
.loader .bar:nth-child(2) {animation-delay: 0.1s;}
.loader .bar:nth-child(3) {animation-delay: 0.2s;}

/*DEFINIAMO L'ANIMAZIONE "LOADINGBAR"*/
@keyframes loadingbar {
 0% {}
 10% {margin-top:5px;height:22px;border-color:#d1d8e6;background-color:#bac5db;}
 20% {margin-top:0px;height:32px;border-color:#d1d7e2;background-color:#c6ccda;}
 30% {margin-top:1px;height:30px;border-color:#d1d8e6;background-color:#bac5db;}
 40% {margin-top:3px;height:26px;}
 50% {margin-top:5px;height:22px;}
 60% {margin-top:6px;height:18px;}
 70% {}
	/*SE ELIMINATI I FRAME, CAUSERANNO UN ECCESSIVO RITARDO*/
100% {}
}
</style>
</head>

<body>

<!-- Facebook Loader -->
<div class="loader">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>
</body>
</html>

Come potete notare, oramai il CSS ha raggiunto delle potenzialità enormi, e per fare delle semplici animazioni non c'è più bisogno di affidarsi alle vecchie GIF, o peggio ancora all'oramai deprecato FLASH.

Spero che anche questo tutorial vi sia piaciuto, non dimenticate di lasciare un like su facebook, e perchè no, se vi è piaciuto tanto tanto tanto, condividetelo con gli amici.

Al prossimo tutorial

Francesco

Tags: