Démos

Toutes les démos

<>

Couverture du livre CSS3 Le design web moderne

Livre CSS3

Le design web moderne

Plus d'infos sur le site officiel

En vente sur Amazon, FNAC, Dunod

Suivre

Actualités du site CSS3Create

Actualités sur CSS et le web en général

Icone de préchargement en Full CSS

Créer une icone de style GIF animé en CSS seulement

Création: décembre 2010Modifié:

Contenu
Full CSS Pas de JavaScript Pas d’images
Navigateurs
Firefox Safari Chrome Opera Internet Explorer
Partagez
Facebook Twitter

Votez

55 votes4.18

Utilisation des animations CSS3 pour créer un effet de préchargement, de style GIF animé. Utilisation de @keyframes.

Le code HTML suivant a été nécessaire, une div contenant 3 autres div.

<div class="chargement">
    <div></div>
    <div></div>
    <div></div>
</div>

Puis l’animation CSS est créée avec @keyframes. La fin de l’animation se situe à 70% pour laisser le temps aux autres animations de se terminer.

/* Code sans préfixes */
@keyframes nomAnim {
from{background:#09C;height:36px;margin-top:-8px;}
70%{background:white;height:20px;margin-top:0px;}
to{background:white;height:20px;margin-top:0px;}
}

Elle est ensuite appelée sur chaque <div> de la <div class="chargement"> :

.chargement div {
    width: 6px;
    height: 20px;
    background: white;
    animation: nomAnim 0.7s infinite linear;
}

Par contre, le délai de lancement de l’animation est différent :

.chargement div:first-child{animation-delay:0s;}
.chargement div:nth-child(2){animation-delay:0.1s;}
.chargement div:last-child{animation-delay:0.2s;}

Envie d'une nouvelle démo?

Un p'tit mot...

#1par Luky_vj , le 6 juin 2011

Site vraiment tres utile et super ;) Big Up !!

#2par Cliff, le 5 septembre 2011

Je ne sais pas si c’est moi mais vos barres s’affichent en même temps et pas l’une à la suite des autres.
Par contre quand je teste moi même ça marche très bien.

#3par Tsiry, le 30 décembre 2011

Chapeau !
vraiment, c’est super !!

#4par NoNalTrX, le 7 décembre 2012

Super site vraiment très utile. par contre, dans ton tuto il manque juste le float : left pour la classe .chargement div.

Merci beaucoup, très bon site vraiment.

#5par gashka, le 15 août 2013

@Cliff :Je ne sais pas si c’est moi mais vos barres s’affichent en même temps et pas l’une à la suite des autres.
Par contre quand je teste moi même ça marche très bien.

pareil les 2 premieres ensembles puis la troisieme seul


modération à priori

Ce forum est modéré à priori : votre contribution n'apparaîtra qu'après avoir été validée par un administrateur du site.

Un message, un commentaire ?
    Qui êtes-vous ? (optionnel)
  • (Pour créer des paragraphes, laissez simplement des lignes vides.)