This css loading effect .mostly loading effect is create flash software .now css present by loading effect.in coding u can change any color to the loading effect in css. css is now all animation crated by simple with customize a coding easy .
Live Demo
DownloadSource code :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 Loading Animation</title>
</head>
<style type="text/css">
.loading span{
display: inline-block;
vertical-align: middle;
width: 10px;
height: 10px;
margin: 50px auto;
background:#005279;
border-radius: 5px;
-webkit-animation: loading 0.9s infinite alternate;
-moz-animation: loading 0.9s infinite alternate;
box-shadow:1px 1px 1px #444444;
}
.loading span:nth-of-type(2) {
background: #005279;
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
}
.loading span:nth-of-type(3) {
background: #005279;
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
}
.loading span:nth-of-type(4) {
background: #005279;
-webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
}
.loading span:nth-of-type(5) {
background: #005279;
-webkit-animation-delay: 0.8s;
-moz-animation-delay: 0.8s;
}
@-webkit-keyframes loading {
0% {
width: 10px;
height: 10px;
-webkit-transform: translateZ(0);
}
100% {
width: 24px;
height: 24px;
-webkit-transform: translateZ(-21px);
}
}
@-moz-keyframes loading {
0% {
width: 10px;
height: 10px;
-moz-transform: translateZ(0);
}
100% {
width: 24px;
height: 24px;
-moz-transform: translateZ(-21px);
}
}
</style>
<body>
<div class="loading">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 Loading Animation</title>
</head>
<style type="text/css">
.loading span{
display: inline-block;
vertical-align: middle;
width: 10px;
height: 10px;
margin: 50px auto;
background:#005279;
border-radius: 5px;
-webkit-animation: loading 0.9s infinite alternate;
-moz-animation: loading 0.9s infinite alternate;
box-shadow:1px 1px 1px #444444;
}
.loading span:nth-of-type(2) {
background: #005279;
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
}
.loading span:nth-of-type(3) {
background: #005279;
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
}
.loading span:nth-of-type(4) {
background: #005279;
-webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
}
.loading span:nth-of-type(5) {
background: #005279;
-webkit-animation-delay: 0.8s;
-moz-animation-delay: 0.8s;
}
@-webkit-keyframes loading {
0% {
width: 10px;
height: 10px;
-webkit-transform: translateZ(0);
}
100% {
width: 24px;
height: 24px;
-webkit-transform: translateZ(-21px);
}
}
@-moz-keyframes loading {
0% {
width: 10px;
height: 10px;
-moz-transform: translateZ(0);
}
100% {
width: 24px;
height: 24px;
-moz-transform: translateZ(-21px);
}
}
</style>
<body>
<div class="loading">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>
No comments:
Post a Comment