CSS animation を使ってローディング用アニメーション
なんとなく思いついたので、CSS でローディングアニメーションを作ってみました。
画像とか canvas 使えよって話ではあるんですけどね……。まあアニメーションの練習ってことで。
今回は jsdo.it で作ったので、それを置いておきます。
Firefox 5 以上、または Webkit 系のブラウザで動きます。
簡単にですが解説してみたいと思います。
まずは HTML から。
<div class="loading style-1">Now Loading...</div>
使うのは div 1個です。
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 の人が既に同じようなことしてました……。
解説も丁寧なので見ておくといいかもしれませんね。