Kedora

[TUTO] Comment ajouter un loader pendant le chargement d'une page web

#loader #chargement

Sur certain sites parfois nous pouvons voir que le temps de chargement complet d'une page est assez long, cela est dû principalement à une quantité d'images trop lourdes ou parfois a une quantité de code conséquent à interpréter.

Pour éviter que le visiteur quitte votre page avant même que cette page soit chargée je vous propose alors d'utiliser un loader. Nous allons voir un exemple de loader. Comme vous avez pu le voir sur la page kedora.fr il y a un loader de chargement. Nous allons voir comment celui-ci fonctionne. 

Il y a différents types de loader, par exemple, vous pouvez utiliser simplement un gif ou bien à l'aide de CSS animé.

Aujourd'hui je trouve qu'utiliser un loader est une méthode simple qui permet de différencier votre site des autres site que l'on peut trouver sur le Web. Le loarder que nous allons voir aujourd'hui utilise à la fois du HTML & CSS ainsi que d'un peu de JQUERY.

ÉTAPE 1: HTML

 

<head>
	<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>

    <div id="loader">
	    	<div id="animation">
	    	<div class="rond1"></div>
	    	<div class="rond2">
	    	<div class="carre1 w3-spin"></div></div>
	    	</div>
	</div>

 

 Pensez bien à ajouter dans le head le fichier qui se trouve sur w3schools.com

 

ÉTAPE 2: CSS

#loader{
    display: block;
    height: 100%;
    width: 100%;
    background-color: #2b2d2c;
    position: fixed;
    z-index: 6;
}
#animation{
    width:150px;
    height:150px;
    position:relative;
    top:50%; 
    margin: auto;
} 
.rond1,.rond2{
    width:100%;
    height:100%;
    opacity:.6;
    position:absolute;
    -webkit-animation:sk-bounce 5s infinite ease-in-out;
    animation:sk-bounce 5s infinite ease-in-out
}
.rond1{
    border-radius:50%; 
    background-color:#333;
}
.carre1{
    width:100%;
    height:100%;
    opacity:.6;
    position:absolute;
    border: solid;
    border-color: #FFF; 
}
.rond2{
    -webkit-animation-delay:-1s;
    animation-delay:-1s
}
@-webkit-keyframes sk-bounce{0%,100%{
         -webkit-transform:scale(0)}50%{
         -webkit-transform:scale(1)}}@keyframes sk-bounce{0%,100%{transform:scale(0);
         -webkit-transform:scale(0)}50%{transform:scale(1);-webkit-transform:scale(1)
         }
}


ÉTAPE 3: JQUERY

 

<script>$(window).on("load",function(){$("#animation").fadeOut(),$("#loader").delay(2000).fadeOut()})</script>

 Pour que le code Jquery fonctionne pensez à bien télécharger le dossier Jquery que l'on trouve sur http://jquery.com/download/ .

 

 

Voilà le résultat, vous avez maintenant un loader comme le mien, vous pouvez maintenant vous amuser à faire d'autres formes et d'autres animations en modifiant le code css. 

 

 

Inscrivez-vous à ma newsletter pour recevoir mes prochains articles