Script CSS : Loader Css

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.

Script mis à jour le 16/12/14

Description du script CSS :

Loader en css3, animation de véhicule routiers

Droits d'utilisations de ce script CSS :

Je peux revendre ce script

Je peux l'utiliser plusieurs fois

Je peux l'utiliser pour mes clients

Je peux modifier ce script

Je dois citer l'auteur du script

<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)  ;  }}

&lt;div class=&quot;loader-box&quot;&gt;&lt;div class=&quot;lable&quot;&gt;Loading&lt;/div&gt;&lt;div class=&quot;loader&quot;&gt;        &lt;div class=&quot;element-animation&quot;&gt;        &lt;img src=&quot;https://dl.dropboxusercontent.com/u/35259193/loader.png&quot; width=&quot;1180&quot; height=&quot;70&quot;;&gt;        &lt;/div&gt;        &lt;div class=&quot;road&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;/**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, &quot;Helvetica Neue&quot;, 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

Questions posées fréquemment

> Comment signaler un script ?

Vous trouverez un bouton "signaler" en haut à droite de cette fiche pour avertir le créateur d'un problème.

Demande de support

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 :