CSS loader animation.
Is there a way to condense the HTML/CSS so it works with an arbitrary number of loading bars?
Created
May 13, 2014 04:43
-
-
Save kohnmd/c9796abb8f73257e6801 to your computer and use it in GitHub Desktop.
A Pen by Mike Kohn.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="loader"> | |
| <div></div> | |
| <div></div> | |
| <div></div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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%;} | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment