ローディングアニメーションをCSSだけで作った。【SCSS】

案件で使うこともあるだろうと思い、よくありがちですがCSSだけで作ったローディングアニメーションのSCSSのソースコードを公開しておきます。

Codepenにソースを公開していますので、ソースコードとデモは下記をご覧ください。(このデモではアニメーションは5秒で止まります。)

//==========[[[Variables]]]==========
$loading-size: 60px;
$loading-duration: 1.04;
$loading-delay: ($loading-duration / 8);
$lite-color: #1655B4;
$bold-color: #91B3E7;
 
//==========[[[Mixins]]]==========
@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);
}

See the Pen Loading Animation only CSS by Minoru Hayakawa (@e-river) on CodePen.

ローディングのサイズ、アニメーションのタイミング、色等を変更したい場合は、Variablesにあるそれぞれの値を変更してください。CSS Animationを使っていますので、IE9以下では動作しません。

ローディングのサイズ
$loading-sizeという変数に定義していますので、変更はここの数値を変えてください。
アニメーションの時間
$loading-durationという変数に定義していますので、変更はここの数値を変えてください。
$lite-color$bold-colorという変数に定義していますので、変更はここのカラーコードを変えてください。

Gistにも載せていますので、もしファイルがほしい場合は、ここからHTMLとSCSSのファイルを取得することができます。