CHIIWEB BLOG0から100へ【jQuery】を利用したカウントアニメーション
この記事を書いている人
今回はこれを作ります 
↑リロード（更新）してみてください
0から100まで数字を動かすアニメーションです。
これは、jQueryを使っています。
jQueryを読み込んだ状態で記述してくださいね
<div class="loader">
<div class="loading"></div>
</div>まずはhtmlです。
CSSで見た目を整えます。
.loader {
background: linear-gradient(rgb(72,233,251) 0%,rgb(216,200,255) 49%,rgb(72,233,251) 100%);
width: 140px;
height: 140px;
border-radius: 50%;
margin: 300px auto;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-family: 'Source Code Pro', monospace;
font-weight: bold;
font-size: 40px;
}
.loading {
opacity: .7;
}肝心の、カウントダウンはこちらです。
var start = 0;
var goal = 100;
var speed = 30;
setInterval(function(){
if(start <= goal){
$('.loading').html(start + '%');
start++;
}
},speed);jQueryを読み込んだ状態で使用してください。
htmlに記述する場合は、<script> </script>内に記述してください。
これだけだと、０→100%にカウントするだけなので、ローディングアニメーションにする時は、その記述も必要です！（※1）
そして、これはあくまで０→100%カウントなので、100%になる前にローディング完了もありえます。
ただ、ローディングアニメーションにする為の記述の時間を調整し、100になるまで終わらせないという書き方も可能です。（※2）
※ローディングアニメーションにする場合
ローディングアニメーションにする場合は、以下の記述も追加してください。
$(window).on('load',function(){
var loading = function(){
$('.loader').fadeOut('fast');
};
setTimeout(loading,1000);
});※↑この「1000」になっているところと、var speed = 30;の「30」を調整し、100になるまでローディング画面が消えないように設定できます。
ぜひ色々試してみてくださいね
記事を気に入ってもらえたら、
ポチっとしてくれると嬉しいです
コメントは承認後に表示されます。
コメント投稿後元記事のトップに戻ります。
エラー表示が出なければ送信されています＾＾