webデザイン・コーディングに役立つ情報、WordPressカスタムに使えるHTML・CSSコピペ用コード、Canva無料テンプレートなどをご紹介します♩

chiweblogちいウェブログ

JavaScriptを利用したカウントアニメーション

%カウントアニメーションJavascript・CSS
この記事を書いている人
Marie

Marie

  • フリーランスwebデザイナー&講師
  • 制作会社・インハウスデザイナーを経験し独立
  • オンラインwebデザイン教室ちいウェブ運営
  • 仕事の合間の息抜きに植物を育てています♡
  • スプラ・DIY・将棋がすき
  • 小4・年長の母

今回はこれを作ります

↑リロード(更新)してみてください

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>内に記述してください。

こちらは、0→100%にカウントするだけです。

ローディングアニメーションに設定したい場合は、その記述も必要です!(※1

そして、これはあくまで0→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してね♡↓

合わせて読んでほしい記事

コメントする

CAPTCHA


コメントは承認後に表示されます。

Home Webデザイン コーディング コピペ用コード JavaScriptを利用したカウントアニメーション

関連記事

更新通知を受け取る

不定期更新の為、
メールにて更新お知らせを
お送りいたしますlove letter

(更新通知以外のメールは
お送りしませんので
ご安心ください)