Skip to content

Instantly share code, notes, and snippets.

@Poordeveloper

Poordeveloper/Loading Icon.markdown

Created November 10, 2015 16:37
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Poordeveloper/ddb43b55ee31783500d4 to your computer and use it in GitHub Desktop.
Save Poordeveloper/ddb43b55ee31783500d4 to your computer and use it in GitHub Desktop.
Download ZIP
Loading Icon
Raw
index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="loadIcon">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
Raw
Loading Icon.markdown
Raw
style.css
@mixin cycle($secs){
animation:spin $secs infinite;
-webkit-animation:spin $secs infinite;
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
}
@keyframes spin{
from{-webkit-transform: rotate(0deg);}
to{-webkit-transform: rotate(360deg);}
}
@-webkit-keyframes spin{
from{-webkit-transform: rotate(0deg);}
to{-webkit-transform: rotate(360deg);}
}
body{
margin:0;
padding:0;
}
#loadIcon{
margin: 60px auto;
height:120px;
width:120px;
position:relative;
div{
position:absolute;
&:first-child{
height:120px;
width:120px;
border-radius:60px;
border-top:solid 10px #237699;
@include cycle(2s);
}
&:nth-child(2){
height:90px;
width:90px;
border-radius:45px;
border-top:solid 10px #6CC5EC;
top: 15px;
left:15px;
@include cycle(1.5s);
}
&:nth-child(3){
height:60px;
width:60px;
border-radius:30px;
border-top:solid 10px #ACDFF6;
top: 30px;
left:30px;
@include cycle(1s);
}
&:nth-child(4){
height:30px;
width:30px;
border-radius:15px;
border-top:solid 10px #D1EEFB;
top: 45px;
left:45px;
@include cycle(.5s);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment