Created
January 31, 2017 17:19
-
-
Save Error601/7044fbe88cf688490971d16fcf31198e to your computer and use it in GitHub Desktop.
Pure CSS animated loading widget
This file contains 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
<style> | |
.loading-animation { | |
position: fixed; | |
top: 50%; | |
left: 50%; | |
margin-left: -50px; | |
width: 100px; | |
height: 80px; | |
text-align: center; | |
background-color: #fff; | |
border-radius: 10px; | |
padding-top: 20px; | |
} | |
.wrapperloading { | |
position: absolute; | |
height: 200px; | |
width: 200px; | |
top: 50%; | |
margin-top: -100px; | |
left: 50%; | |
margin-left: -100px; | |
} | |
.wrapperloading .loading.up { | |
position: absolute; | |
height: 200px; | |
width: 200px; | |
border-radius: 150px; | |
border: 1px solid #fff; | |
border-top-color: #fff; | |
border-left-color: #555; | |
border-right-color: #555; | |
border-bottom-color: #fff; | |
-webkit-animation: rotation 3s linear infinite; | |
-moz-animation: rotation 3s linear infinite; | |
-o-animation: rotation 3s linear infinite; | |
animation: rotation 3s linear infinite; | |
} | |
.wrapperloading .loading.down { | |
position: absolute; | |
height: 100px; | |
width: 100px; | |
top: 50%; | |
margin-top: -50px; | |
left: 50%; | |
margin-left: -50px; | |
border-radius: 150px; | |
border: 1px solid #fff; | |
border-left-color: #fff; | |
border-top-color: #555; | |
border-bottom-color: #555; | |
border-right-color: #fff; | |
-webkit-animation: rotation 1s linear infinite; | |
-moz-animation: rotation 1s linear infinite; | |
-o-animation: rotation 1s linear infinite; | |
animation: rotation 1s linear infinite; | |
} | |
</style> | |
<div class="loading-animation"> | |
<div class="wrapperloading"> | |
<div class="loading up"></div> | |
<div class="loading down"></div> | |
</div> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment