santé mentale emplois nyc https://pilulesfrance.com/dysfonction-erectile/cialis-sur-internet/ où puis-je acheter des pilules abortives

Un loader en CSS avec des web fonts

Actuellement je travaillle sur un projet en mode Mobile first. En partant de ce principe, l'idée est de créer un loader pour montrer le chargement sur un device mobile.

Ne voulant pas utiliser d'image pour cause de bande passante, je me suis penché sur l'utilisation d'une web font que l'on utilise dans ce projet.

Démo

Je vais donc vous présenter la façon dont je m'y suis pris.

L'HTML

Voici la structure du loader :

<div id="loader">
    <div class="icon-spinner2 loading-spin"></div>
    <div class="icon-leaf loading-logo"></div>
</div>

Le DIV#loader englobe les 2 DIVs affichant les webfonts.

A partir de là, j'ai appliqué une animation CSS à base de transformation pour mettre en place une rotation infinie sur le DIV.loading-spin. 
Enfin, afin de rajouter un petit effet, j'ai ajouté une animation de "pulse" sur le DIV.loading-logo

Le CSS

Dans le head je charge la webfont (icomoon)

<link rel="stylesheet" href="icomoon.css"/>

 Puis j'ajoute le css pour le loader :

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

    50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes pulse {
    0% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }

    100% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
}
#loader {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 50px auto;
}
.loading-spin {
    -webkit-animation: spin 3s linear infinite;
    -moz-animation: spin 3s linear infinite;
    animation: spin 3s linear infinite;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    position: absolute;
    width: 100%;
    height: 100%;
    color: #444;
    font-size: 100px;
}
.loading-logo {
    -webkit-animation: pulse 2s linear infinite;
    -moz-animation: pulse 2s linear infinite;
    animation: pulse 2s linear infinite;
    -webkit-transform-origin: 25% 30%;
    -moz-transform-origin: 25% 30%;
    transform-origin: 25% 30%;
    position: absolute;
    width: 100%;
    height: 100%;
    color: #00C2FF;
    font-size: 40px;
    padding: 28px;
}

Pour l'animation pulse,  j'ai utilisé le code de l'animation CSS provenant le la librairie Animate.css.

 

 

DEMO

 
image jerome debray

Jerome Debray est responsable de projet et lead developper web pour Ouestfrance Multimedia dans la business unit Auto.

retourner en haut de la page