JavaScriptを利用したカウントアニメーション
3845 この記事を書いている人
今回はこれを作ります 
↑リロード（更新）してみてください
0から100まで数字を動かすアニメーションです。
<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;
}カウントダウン用jsはこちらです。
var start = 0;
var goal = 100;
var speed = 30;
setInterval(function(){
if(start <= goal){
$('.loading').html(start + '%');
start++;
}
},speed);htmlに記述する場合は、<script>〜</script>内に記述してください。
こちらは、０→100%にカウントするだけです。
ローディングアニメーションに設定したい場合は、その記述も必要です！（※1）
そして、これはあくまで０→100%カウントする、という動きなので、100%になる前にローディング完了もあり得ます。
（
ローディング完了まで残り何%かという表示ではありません）
ローディングアニメーションにする為の記述の時間を調整し、この数字が100になるまでローディングアニメを終わらせないという書き方も可能です。（※2）
※ローディングアニメーションにする場合
ローディングアニメーションにする場合は、以下の記述も追加してください。
jQueryを読み込んだ状態で使用してください。
$(window).on('load',function(){
var loading = function(){
$('.loader').fadeOut('fast');
};
setTimeout(loading,1000);
});※↑この「1000」になっているところと、var speed = 30;の「30」を調整し、100になるまでローディング画面が消えないように時間を調整できます。
ぜひ色々試してみてくださいね
いいなと思ったら
TAPしてね♡↓
【CSS】かわいい♡桜を散らすアニメーション 【CSS】だけで波がゆらゆらしているアニメーション
コメントは承認後に表示されます。