Skip to content

Instantly share code, notes, and snippets.

@e-river
Created January 16, 2014 05:11
Show Gist options
  • Save e-river/8450126 to your computer and use it in GitHub Desktop.
Save e-river/8450126 to your computer and use it in GitHub Desktop.
Loading Animation for only CSS
<div id="loading-wrapper">
<span id="bounce1" class="loading-bounce"></span>
<span id="bounce2" class="loading-bounce"></span>
<span id="bounce3" class="loading-bounce"></span>
<span id="bounce4" class="loading-bounce"></span>
<span id="bounce5" class="loading-bounce"></span>
<span id="bounce6" class="loading-bounce"></span>
<span id="bounce7" class="loading-bounce"></span>
<span id="bounce8" class="loading-bounce"></span>
<!-- /#loading-wrapper --></div>
//==========[[[Variable]]]==========
$loading-size: 60px;
$loading-duration: 1.04;
$loading-delay: ($loading-duration / 8);
$lite-color: #1655B4;
$bold-color: #91B3E7;
//==========[[[Mixin]]]==========
@mixin keyframes($name) {
@-webkit-keyframes #{$name} {
@content;
}
@keyframes #{$name} {
@content;
}
}
@mixin animation-name($name) {
-webkit-animation-name: $name;
animation-name: $name;
}
@mixin animation-duration($time) {
-webkit-animation-duration: $time + s;
animation-duration: $time + s;
}
@mixin animation-iteration-count($count) {
-webkit-animation-iteration-count: $count;
animation-iteration-count: $count;
}
@mixin animation-direction($direction) {
-webkit-animation-direction: $direction;
animation-direction: $direction;
}
@mixin animation-delay($time, $num) {
-webkit-animation-delay: $time - ($loading-delay * $num) + s;
animation-delay: $time - ($loading-delay * $num) + s;
}
//==========[[[Defined Style]]]==========
@include keyframes(loading) {
0% {
background-color: $lite-color;
}
100% {
background-color: $bold-color;
}
}
#loading-wrapper {
position: fixed;
top: 50%;
left: 50%;
z-index: 9999;
width: $loading-size;
height: $loading-size;
margin-top: -1 * ($loading-size / 2);
margin-left: -1 * ($loading-size / 2);
}
.loading-bounce {
display: block;
position: absolute;
width: $loading-size / 5;
height: $loading-size / 5;
background-color: $bold-color;
border-radius: ($loading-size / 5) / 2;
@include animation-name(loading);
@include animation-duration($loading-duration);
@include animation-iteration-count(infinite);
@include animation-direction(linear);
}
#bounce1 {
top: 0px;
left: 50%;
margin-left: -1 * ($loading-size / 5)/ 2;
@include animation-delay($loading-duration, 5)
}
#bounce2 {
top: ($loading-size / 5)/ 2;
right: ($loading-size / 5)/ 2;
@include animation-delay($loading-duration, 4);
}
#bounce3 {
top: 50%;
right: 0;
margin-top: -1 * ($loading-size / 5)/ 2;
@include animation-delay($loading-duration, 3);
}
#bounce4 {
top: (($loading-size / 5)/ 2) * 7;
right: ($loading-size / 5)/ 2;
@include animation-delay($loading-duration, 2);
}
#bounce5 {
bottom: 0;
left: 50%;
margin-left: -1 * ($loading-size / 5)/ 2;
@include animation-delay($loading-duration, 1);
}
#bounce6 {
top: (($loading-size / 5)/ 2) * 7;
left: ($loading-size / 5)/ 2;
@include animation-delay($loading-duration, 0);
}
#bounce7 {
top: 50%;
left: 0;
margin-top: -1 * ($loading-size / 5)/ 2;
@include animation-delay($loading-duration, -1);
}
#bounce8 {
top: ($loading-size / 5)/ 2;
left: ($loading-size / 5)/ 2;
@include animation-delay($loading-duration, -2);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment