Home » , , » CSS3 Loading Bar

CSS3 Loading Bar

CSS3 Loading Bar

HTML

<div class='loading'>
<span></span>
<span></span>
<span></span>
<span></span>
</div>

CSS

.loading {text-align:center;}

.loading span {
display:inline-block;
margin:0px 1px;
width:20px;
height:20px;
background-color:cyan;
}

.loading span:nth-child(1) {
-webkit-animation:loading 0.5s infinite alternate 0s;
-moz-animation:loading 0.5s infinite alternate 0s;
-ms-animation:loading 0.5s infinite alternate 0s;
-o-animation:loading 0.5s infinite alternate 0s;
animation:loading 0.5s infinite alternate 0s;
}

.loading span:nth-child(2) {
-webkit-animation:loading 0.5s infinite alternate 0.2s;
-moz-animation:loading 0.5s infinite alternate 0.2s;
-ms-animation:loading 0.5s infinite alternate 0.2s;
-o-animation:loading 0.5s infinite alternate 0.2s;
animation:loading 0.5s infinite alternate 0.2s;
}

.loading span:nth-child(3) {
-webkit-animation:loading 0.5s infinite alternate 0.4s;
-moz-animation:loading 0.5s infinite alternate 0.4s;
-ms-animation:loading 0.5s infinite alternate 0.4s;
-o-animation:loading 0.5s infinite alternate 0.4s;
animation:loading 0.5s infinite alternate 0.4s;
}

.loading span:nth-child(4) {
-webkit-animation:loading 0.5s infinite alternate 0.6s;
-moz-animation:loading 0.5s infinite alternate 0.6s;
-ms-animation:loading 0.5s infinite alternate 0.6s;
-o-animation:loading 0.5s infinite alternate 0.6s;
animation:loading 0.5s infinite alternate 0.6s;
}

@-webkit-keyframes loading {
0% {opacity:0.1;}
100% {opacity:1; }
}

@-moz-keyframes loading {
0% {opacity:0.1;}
100% {opacity:1; }
}

@-ms-keyframes loading {
0% {opacity:0.1;}
100% {opacity:1; }
}

@-o-keyframes loading {
0% {opacity:0.1;}
100% {opacity:1; }
}

@keyframes loading {
0% {opacity:0.1;}
100% {opacity:1; }
}

Demo

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Creating Website

0 comments:

Post a Comment

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Homtimpa - All Rights Reserved
Template Modify by Creating Website
Proudly powered by Blogger