css3でloadingアニメーションを作ってみたまとめです。
animationの設定
書き方とそれぞれのメモ。
css
.loading {
animation: animation-name animation-duration animation-timing-function animation-delay animation-delayunt animation-direction;
}
@keyframes 任意の名前 {
from {
/* アニメーション開始時のスタイル */
}
to {
/* アニメーション終了時のスタイル */
}
}
animation-name: @keyframesで付けた任意の名前
animation-duration: アニメーションの時間
animation-timing-function: 動き方（ease, linear, ease, ease-out, ease-in-out, cubic-bezier）
animation-delay: アニメーションがスタートする時間
animation-delayunt: アニメーションの繰り返し（infinite: 無限に繰り返す、数値: 回数）
animation-direction: 逆再生の設定。defaultはnormal。alternateが逆再生。
画像をcssでアニメーション
まずは画像を使って、cssで動かしてみます。
くるくる回る、あれです。
html
<body>
<img class="loading" src="../loading/assets/img/tyopress.svg" alt="loading">
</body>
css
.loading {
animation: loading 1s linear infinite;
}
@keyframes loading {
from {
}
to {
transform: rotate(360deg);
transform-origin: 50% 50%;
}
}
これだけで、簡単にアニメーションが追加出来ました。
fromとtoは%に置き換えて、ポイントを増やすことも出来ます。
例えば、こんな感じ。
くるくる回りながら上下するアニメーションです。
css
@keyframes loading {
0% {
}
50% {
margin-top: 100px;
}
100% {
margin-top: 0;
transform: rotate(360deg);
transform-origin: 50% 50%;
}
}
全部cssで書いてみる
さらに、画像部分もcssだけで書いてみます。
視力検査のあれがくるくる回ります。
html
<div class="loading"></div>
css
.loading {
width: 50px;
height: 50px;
border: 5px solid #000;
border-right: 5px solid transparent;
border-radius: 30px;
animation: loading 1s linear infinite;
}
@keyframes loading {
to {
}
from {
transform: rotate(360deg);
transform-origin: 50% 50%;
}
}
ポイントを増やして、変化をつけてみます。
css
@keyframes loading {
0% {
}
50% {
opacity: .6;
}
100% {
transform: rotate(360deg);
transform-origin: 50% 50%;
opacity: .3;
}
}
cssだけで書けるから、ちょっとした手直しも気軽に出来るのがいいですね。
jQueryでページに埋め込む
せっかくなので、loadingとして機能するようにページに埋め込んでみます。
*ここからはjQueryで設定します。
jQueryの基本、おさらい
jQuery
$(window).on('load',function(){
// DOM,画像の読み込みが全て終わったらする処理
});
$(function(){
// DOMの読み込みが終わったらする処理
});
*jQueryの読み込み、書き方などは省いています。
loadingの表示、非表示
今回は、DOM,画像の読み込みが全て終わったらloadingを非表示に、
コンテンツ部分を表示するように設定します。
html
<body>
<div class="loading"></div>
<div class="content"></div>
</body>
jQuery
$(window).on('load',function(){
$('.loading').fadeOut('fast'); // 画像が全て読み込まれたら.loadingを非表示
$('.content').fadeIn('slow'); // 画像が全て読み込まれたら.contentを表示
});
さらに、loadingの時間を任意で設定したい場合。
css
.content {
display: none; /* あらかじめ.contentを非表示にしておく */
}
jQuery
$(window).on('load',function(){
var loading = function(){
$('.loading').fadeOut('fast');
$('.content').fadeIn('slow');
};
setTimeout(loading,3000); // setTimeoutを使って表示時間を設定する
});
これで、任意の時間でloadingの時間を設定できました。
See the Pen JLrJgR by kayukihashimoto (@kfunnytokyo) on CodePen.
おわり。