CSS loader animation.
Is there a way to condense the HTML/CSS so it works with an arbitrary number of loading bars?
<div class="loader"> | |
<div></div> | |
<div></div> | |
<div></div> | |
</div> |
body { | |
background: #000; | |
} | |
.loader { | |
width: 70%; | |
margin: 20px auto; | |
overflow: hidden; | |
} | |
.loader div { | |
width: 0; | |
height: 3px; | |
border-top: 1px solid #FFF; | |
} | |
.loader div { | |
-moz-animation-duration: 1500ms; | |
-webkit-animation-duration: 1500ms; | |
-ms-animation-duration: 1500ms; | |
-o-animation-duration: 1500ms; | |
animation-duration: 1500ms; | |
-moz-animation-iteration-count: infinite; | |
-webkit-animation-iteration-count: infinite; | |
-ms-animation-iteration-count: infinite; | |
-o-animation-iteration-count: infinite; | |
animation-iteration-count: infinite; | |
-moz-animation-timing-function: ease-in-out; | |
-webkit-animation-timing-function: ease-in-out; | |
-ms-animation-timing-function: ease-in-out; | |
-o-animation-timing-function: ease-in-out; | |
animation-timing-function: ease-in-out; | |
} | |
.loader div:first-child { | |
-moz-animation-name: load; | |
-webkit-animation-name: load; | |
-ms-animation-name: load; | |
-o-animation-name: load; | |
animation-name: load; | |
} | |
@-moz-keyframes load { | |
0% {width: 0%;} | |
50% {width: 0%;} | |
100% {width: 100%;} | |
} | |
@-webkit-keyframes load { | |
0% {width: 0%;} | |
50% {width: 0%;} | |
100% {width: 100%;} | |
} | |
@-ms-keyframes load { | |
0% {width: 0%;} | |
50% {width: 0%;} | |
100% {width: 100%;} | |
} | |
@-o-keyframes load { | |
0% {width: 0%;} | |
50% {width: 0%;} | |
100% {width: 100%;} | |
} | |
@keyframes load { | |
0% {width: 0%;} | |
50% {width: 0%;} | |
100% {width: 100%;} | |
} | |
.loader div:nth-child(2) { | |
-moz-animation-name: load2; | |
-webkit-animation-name: load2; | |
-ms-animation-name: load2; | |
-o-animation-name: load2; | |
animation-name: load2; | |
} | |
@-moz-keyframes load2 { | |
0% {width: 0%;} | |
30% {width: 0%;} | |
80% {width: 100%;} | |
100% {width: 100%;} | |
} | |
@-webkit-keyframes load2 { | |
0% {width: 0%;} | |
30% {width: 0%;} | |
80% {width: 100%;} | |
100% {width: 100%;} | |
} | |
@-ms-keyframes load2 { | |
0% {width: 0%;} | |
30% {width: 0%;} | |
80% {width: 100%;} | |
100% {width: 100%;} | |
} | |
@-o-keyframes load2 { | |
0% {width: 0%;} | |
30% {width: 0%;} | |
80% {width: 100%;} | |
100% {width: 100%;} | |
} | |
@keyframes load2 { | |
0% {width: 0%;} | |
30% {width: 0%;} | |
80% {width: 100%;} | |
100% {width: 100%;} | |
} | |
.loader div:last-child { | |
-moz-animation-name: load3; | |
-webkit-animation-name: load3; | |
-ms-animation-name: load3; | |
-o-animation-name: load3; | |
animation-name: load3; | |
} | |
@-moz-keyframes load3 { | |
0% {width: 0%;} | |
10% {width: 0%;} | |
60% {width: 100%;} | |
100% {width: 100%;} | |
} | |
@-webkit-keyframes load3 { | |
0% {width: 0%;} | |
10% {width: 0%;} | |
60% {width: 100%;} | |
100% {width: 100%;} | |
} | |
@-ms-keyframes load3 { | |
0% {width: 0%;} | |
10% {width: 0%;} | |
60% {width: 100%;} | |
100% {width: 100%;} | |
} | |
@-o-keyframes load3 { | |
0% {width: 0%;} | |
10% {width: 0%;} | |
60% {width: 100%;} | |
100% {width: 100%;} | |
} | |
@keyframes load3 { | |
0% {width: 0%;} | |
10% {width: 0%;} | |
60% {width: 100%;} | |
100% {width: 100%;} | |
} |