En poursuivant votre navigation sur le site, vous acceptez l’utilisation de cookies pour : [vous identifier / personnaliser votre expérience]. Cliquez ici Pour en savoir plus.
...
Loader en css3, animation de véhicule routiers
<div class="loader-box"><div class="lable">Loading</div><div class="loader"> <div class="element-animation"> <img src="https://dl.dropboxusercontent.com/u/35259193/loader.png" width="1180" height="70";> </div> <div class="road"></div></div></div>/**CSS**/body{text-align:center;background-color:#f2f2f2;}.loader-box{width:200px;height:200px;margin:auto;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;background-color:#ffffff;margin-top:100px;text-align:center;}.lable{height:30px;line-height:30px;padding-top:20px;font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;color:#404040;font-size:20px;}.loader{width:90px;height:90px;background-color:#FFFFFF;overflow:hidden;display:block;-moz-border-radius:100%;-webkit-border-radius:100%;border-radius:100%;border:3px solid #5dba9d;position:relative;margin:15px auto; z-index:1;}.element-animation{ animation:animationFrames linear 3s; animation-iteration-count: infinite; animation-fill-mode: forwards; /*when the spec is finished*/ -webkit-animation: animationFrames linear 3s; -webkit-animation-iteration-count: infinite; -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ -moz-animation: animationFrames linear 3s; -moz-animation-iteration-count: infinite; -moz-animation-fill-mode:forwards; /*FF 5+*/ -o-animation: animationFrames linear 3s; -o-animation-iteration-count: infinite; -o-animation-fill-mode:forwards; /*Not implemented yet*/ -ms-animation: animationFrames linear 3s; -ms-animation-iteration-count: infinite; -ms-animation-fill-mode:forwards; /*IE 10+*/}.road{width:100%;height:3px;background-color:#5dba9d;position:absolute;bottom:5px;z-index:1;}@keyframes animationFrames{ 0% { transform: translate(-1160px,15px) ; } 100% { transform: translate(0px,15px) ; }}@-moz-keyframes animationFrames{ 0% { transform: translate(-1160px,15px) ; } 100% { transform: translate(0px,15px) ; }}@-webkit-keyframes animationFrames { 0% { transform: translate(-1160px,15px) ; } 100% { transform: translate(0px,15px) ; }}@-o-keyframes animationFrames { 0% { transform: translate(-1160px,15px) ; } 100% { transform: translate(-0px,15px) ; }}@-ms-keyframes animationFrames { 0% { transform: translate(-1160px,15px) ; } 100% { transform: translate(0px,15px) ; }}
Copier/coller le code et laissez la magie opérer
16/12/14 : Première version du script
Vous trouverez un bouton "signaler" en haut à droite de cette fiche pour avertir le créateur d'un problème.
Vous rencontrez une difficulté ou avez besoin d'informations supplémentaires sur le script ? N'hésitez pas à contacter l'auteur en cliquant sur le bouton ci-dessous :
Nombre de visites du script : 1494
Moyenne de visites des scripts : 13
Prix de vente moyen d'un script : 3 euros