CSS Animationsを使ってローディング用アニメーション
公開：
更新：
なんとなく思いついたので、CSSでローディングアニメーションを作ってみました。
画像とかcanvas使えよって話ではあるんですけどね……。まあアニメーションの練習ってことで。
今回は『jsdo.it』で作ったので、それを置いておきます。
Firefox 5以上、またはWebkit系のブラウザで動きます。
2020年1月8日 追記：
『jsdo.it』は2019年に閉鎖されましたので、回収できた自分のコードだけデモページに移行しました。
CSS Loading Animation
簡単にですが解説してみたいと思います。
まずHTMLから。
<div class="loading style-1">Now Loading...</div>使うのはdiv1個です。
class名が2つ付いてるのは、最初いくつか作ろうと思ってたからです。
（結局思いつかなかったので諦めましたが……）
では次にCSSです。
ベンダープレフィックス付きのものと、あんまり関係ない部分は省いてあります。
body {
background: #101010;
}
.loading {
margin : 50px auto;
color : transparent;
cursor : default;
user-select: none;
}
.style-1 {
position : relative;
width : 50px;
height : 50px;
animation: style-1 infinite 0.8s cubic-bezier(0, 0, 1, 1);
}
.style-1:before {
display : block;
position : absolute;
top : -5px;
left : 20px;
width : 10px;
height : 10px;
background-color: rgba(242, 250, 255, 0.9);
box-shadow : 0 0px 3px 0 rgba(242, 250, 255, 0.9),
-12px 4px 1px -1px rgba(242, 250, 255, 0.9),
-20px 12px 1px -2px rgba(242, 250, 255, 0.9),
-25px 22px 1px -3px rgba(242, 250, 255, 0.9);
content : "";
}
@keyframes style-1 {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}.loadingの部分のテキストは、text-indent: -9999pxを使ってもいいのですが、今回はこの要素をoverflow: hiddenしたくなかったので、文字色を透明にしてます。
また、user-select: noneでテキストを選択できないようにしています。カーソルの形はまあ……気分的なものです。
:before擬似要素の部分は、ちまちま調整しながら配置しました。box-shadowの影の広がりの部分にマイナスの数値を指定することで円を少しずつ小さくしています。ここでも細々とした配置調整をしています。
最後にアニメーション部分です。@keyframesでは要素を回転させているだけです。50%の部分はなくても大丈夫だと思いますが、一応書いておきました。
ここに10%刻みくらいでscale(1)とscale(1.1)を指定したらもう少し動きが出ます。ちょっとキモイですが。
アニメーション部分のプロパティは面倒だったのでanimationショートハンドプロパティを使いました。
省略せず個別に書くと下のような感じになります。
.style-1 {
animation-name : style-1;
animation-iteration-count: infinite;
animation-duration : 0.8s;
animation-timing-function: cubic-bezier(0, 0, 1, 1);
animation-delay : 0s;
animation-direction : normal;
animation-fill-mode : none;
animation-play-state : running;
}CSSアニメーションの説明はMozillaのページが分かりやすいです。
作ったあとに検索してたら5509の人が既に同じようなことしてました……。
解説も丁寧なので見ておくといいかもしれませんね。