jqueryを使用して基本的なローディングをの実装方法をメモします。
昨今ローディングページにも工夫を凝らしているクリエイティブサイトも増えました。
ここでは、基本的なローディングとロゴなどのイメージを少しアニメーションさせたパターンをメモします。
jqueryを実装する
まずは、</body>の前にjqueryを設置します。
<script src='https://code.jquery.com/jquery-3.3.1.min.js'></script>
パーセントとローディングバー
最も基本的なパターンですね。読み込みパーセントとローディングバーがリンクしているタイプです。
jquery後にCDNを設置します。
<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/master/dist/progressbar.min.js"></script> IE11への対応が必要な場合は以下を追記します。 <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js"></script>
JSを記述する
javascriptを記述します。
var bar = new ProgressBar.Line(loading_text, {
easing: 'easeInOut',
duration: 1000,
strokeWidth: 0.2,
color: '#555',
trailWidth: 0.2,
trailColor: '#bbb',
text: {
style: {
position: 'absolute',
left: '50%',
top: '50%',
padding: '0',
margin: '-30px 0 0 0',
transform:'translate(-50%,-50%)',
'font-size':'1rem',
color: '#fff',
},
autoStyleContainer: false
},
step: function(state, bar) {
bar.setText(Math.round(bar.value() * 100) + ' %');
}
});
//アニメーションスタート
bar.animate(1.0, function () {
$("#loading").delay(500).fadeOut(800);
});
easingはアニメーション効果です。linear、easeIn、easeOut、easeInOutが指定可能です。
その他、時間・進捗ゲージの太さ・ゲージベースのい太さやカラーを指定します。
easing: 'easeInOut',//アニメーション効果 duration: 1000,//時間指定(1000＝1秒) strokeWidth: 0.2,//進捗ゲージの太さ color: '#555',//進捗ゲージのカラー trailWidth: 0.2,//ゲージベースの線の太さ trailColor: '#bbb',//ゲージベースの線のカラー
テキストのスタイルを設定します。
text: {
style: {
position: 'absolute',
left: '50%',
top: '50%',
padding: '0',
margin: '-30px 0 0 0',
transform:'translate(-50%,-50%)',
'font-size':'1rem',
color: '#fff',
},
autoStyleContainer: false
},
スタートするアニメーションを設定します。
//バーを描画する割合を指定します 1.0 なら100%まで描画
bar.animate(1.0, function () {
//アニメーションが終わったら#loadingエリアをフェードアウト
$("#loading").delay(500).fadeOut(800);
});
CSSを記述する
CSSを記述します。
#loading {
position: fixed;
z-index: 99999999;
width: 100%;
height: 100%;
background:#000;
text-align:center;
color:#fff;
}
#loading_text {
position: absolute;
top: 50%;
left: 50%;
z-index: 999;
width: 100%;
transform: translate(-50%, -50%);
color: #fff;
}
HTMLを記述する
HTMLを記述します。
<body>直下に記述します。
<div id="loading"> <div id="loading_text"></div> </div>
イメージがアニメーションで出現するローディング
本サイトでも使用しています。SVGをローディングに使用しています。
JSを記述する
javascriptを記述します。
こちら前述したCDN不要です。jqueryのみでOKです。
$(window).on('load',function(){
$("#loading").delay(2000).fadeOut('slow');
$("#loading-img").delay(1500).fadeOut('slow');
});
ローディング画面を2秒（2000ms）待機してからフェードアウトさせます。
$("#loading").delay(2000).fadeOut('slow');
ロゴを1.5秒（1500ms）待機してからフェードアウトさせます。
$("#loading-img").delay(1500).fadeOut('slow');
基本的にはこれだけです。
CSSを記述する
CSSを記述します。
#loading {
position: fixed;
width: 100%;
height: 100%;
z-index: 99999999;
background:#fff;
text-align:center;
}
#loading-img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#loading-img img {
width:260px;
}
.fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes fadeUpAnime{
from {
opacity: 0;
transform: translateY(100px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
animationプロパティを使用してアニメーションの設定をします。
HTMLを記述する
HTMLを記述します。
<body>直下に記述します。
<div id="loading"> <div id="loading-img"> <img src="img/loading.svg" alt="" class="fadeUp"> </div> </div>
今回は基本的なギミックですが、SVGを使用して手書きアニメーションを実装するなど、バリエーションが楽します。
次回メモしたいと思います。
