Skip to content

Instantly share code, notes, and snippets.

@AntoniosHadji
Created February 24, 2013 03:41
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save AntoniosHadji/5022477 to your computer and use it in GitHub Desktop.
i found this on codepen. http://codepen.io/pixelgrid/pen/KknCd Cool Css loading animation - one element css animation using box shadows the animation with the filling up circle uses 2 elements
<div class="loader"></div>
<div class="loader fill">
<div class="filler"></div>
</div>
.loader{
width:100px;
height:100px;
border-radius:50%;
border:1px solid;
margin:100px auto;
background:#000;
animation: load linear 2s infinite;
}
@keyframes load{
8%{ box-shadow:0 -70px 0 -45px;
}
16%{box-shadow:0 -70px 0 -45px,
35px -60px 0 -45px;
}
24%{box-shadow:0 -70px 0 -45px,
35px -60px 0 -45px,
60px -35px 0 -45px;
}
32%{box-shadow:0 -70px 0 -45px,
35px -60px 0 -45px,
60px -35px 0 -45px,
70px 0 0 -45px;
}
40%{box-shadow:0 -70px 0 -45px,
35px -60px 0 -45px,
60px -35px 0 -45px,
70px 0 0 -45px,
60px 35px 0 -45px;
}
48%{
box-shadow:0 -70px 0 -45px,
35px -60px 0 -45px,
60px -35px 0 -45px,
70px 0 0 -45px,
60px 35px 0 -45px,
35px 60px 0 -45px;
}
56%{
box-shadow:0 -70px 0 -45px,
35px -60px 0 -45px,
60px -35px 0 -45px,
70px 0 0 -45px,
60px 35px 0 -45px,
35px 60px 0 -45px,
0 70px 0 -45px;
}
64%{
box-shadow:0 -70px 0 -45px,
35px -60px 0 -45px,
60px -35px 0 -45px,
70px 0 0 -45px,
60px 35px 0 -45px,
35px 60px 0 -45px,
0 70px 0 -45px,
-35px 60px 0 -45px;
}
72%{
box-shadow:0 -70px 0 -45px,
35px -60px 0 -45px,
60px -35px 0 -45px,
70px 0 0 -45px,
60px 35px 0 -45px,
35px 60px 0 -45px,
0 70px 0 -45px,
-35px 60px 0 -45px,
-60px 35px 0 -45px;
}
80%{
box-shadow:0 -70px 0 -45px,
35px -60px 0 -45px,
60px -35px 0 -45px,
70px 0 0 -45px,
60px 35px 0 -45px,
35px 60px 0 -45px,
0 70px 0 -45px,
-35px 60px 0 -45px,
-60px 35px 0 -45px,
-70px 0 0 -45px;
}
88%{
box-shadow:0 -70px 0 -45px,
35px -60px 0 -45px,
60px -35px 0 -45px,
70px 0 0 -45px,
60px 35px 0 -45px,
35px 60px 0 -45px,
0 70px 0 -45px,
-35px 60px 0 -45px,
-60px 35px 0 -45px,
-70px 0 0 -45px,
-60px -35px 0 -45px;
}
100%{
box-shadow:0 -70px 0 -45px,
35px -60px 0 -45px,
60px -35px 0 -45px,
70px 0 0 -45px,
60px 35px 0 -45px,
35px 60px 0 -45px,
0 70px 0 -45px,
-35px 60px 0 -45px,
-60px 35px 0 -45px,
-70px 0 0 -45px,
-60px -35px 0 -45px,
-35px -60px 0 -45px;
}
}
.fill{
background:#fff;
overflow:hidden;
position:relative;
}
.filler{
width:100%;
height:100%;
background:#000;
position:absolute;
top:100%;
animation:fill 2s linear infinite;
}
@keyframes fill{
100%{top:0%;}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment