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