プログレスバー+数字カウントアップ+画面が開く

ローディング
-プログレスバー+数字カウントアップ+画面が開く-

デモページを見る

See the Pen 4-1-3プログレスバー+数字カウントアップ+画面が開く by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.

「Result」下のRerunを押して動きを確かめてね!↑

動きを実現する仕組み

ProgressBar.js というプログレスバーを表示するライブラリを使ってローディング時の数字のカウントアップとプログレスバーを表示。
jQuery でローディング画面のフェードアウトと、上下の2 エリアにクラス名を付与してCSS のアニメーションで画面を開く。

[使用するライブラリ]
* jQuery
* ProgressBar.js(https://kimmobrunfeldt.github.io/progressbar.js/

HTMLの書き方

  1. head終了タグ直前に自作のCSSを読み込みます。
    <link rel="stylesheet" type="text/css" href="css/4-1-3.css">
    </head>
  2. body内のローディングを表示させたい場所に以下のHTMLを記載します。
    
    <div id="splash">
    <div id="splash_text"></div>
    <div class="loader_cover loader_cover-up"></div><!--上に上がるエリア-->
    <div class="loader_cover loader_cover-down"></div><!--下に下がるエリア-->
    <!--/splash--></div>
    <div id="container">
    <p>ローディング後、この画面が見えます。</p>
    <!--/container--></div>
    
  3. body 終了タグ直前に jQuery、ProgressBar.js、動きを制御する自作のJS の3 つを読み込みます。
    また、IE11 に対応したい場合はIE対策用のJSを追加で2 つ読み込みます。

    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <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-->
    <script src="js/4-1-3.js"></script>
    </body>

自作のCSS内の書き方

/*========= LoadingのためのCSS ===============*/

/* Loading背景画面設定 */
#splash {
    /*fixedで全面に固定*/
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 999;
	text-align:center;
	color:#fff;
}

/* Loading画像中央配置 */
#splash_text {
	position: absolute;
	top: 50%;
	left: 50%;
    z-index: 999;
	transform: translate(-50%, -50%);
	color: #fff;
	width: 100%;
}

/*IE11対策用バーの線の高さ※対応しなければ削除してください*/
#splash_text svg{
    height: 2px;
}

/*割れる画面のアニメーション*/
.loader_cover {
    width: 100%;
    height: 50%;
    background-color: #333;
    transition: all .2s cubic-bezier(.04, .435, .315, .9);
    transform: scaleY(1);
}
/*上の画面*/
.loader_cover-up {
    transform-origin: center top;
}

/*下の画面*/
.loader_cover-down {
    position: absolute;
    bottom: 0;
    transform-origin: center bottom;
}
/*クラス名がついたらY軸方向に0*/
.coveranime {
    transform: scaleY(0);
}

自作のJS内の書き方

//テキストのカウントアップ+バーの設定
var bar = new ProgressBar.Line(splash_text, {//id名を指定
	easing: 'easeInOut',//アニメーション効果linear、easeIn、easeOut、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 //自動付与のスタイルを切る
	},
	step: function(state, bar) {
		bar.setText(Math.round(bar.value() * 100) + ' %'); //テキストの数値
	}
});

//アニメーションスタート
bar.animate(1.0, function () {//バーを描画する割合を指定します 1.0 なら100%まで描画します
	$("#splash_text").fadeOut(10);//フェイドアウトでローディングテキストを削除
	$(".loader_cover-up").addClass("coveranime");//カバーが上に上がるクラス追加
	$(".loader_cover-down").addClass("coveranime");//カバーが下に下がるクラス追加
	$("#splash").fadeOut();//#splashエリアをフェードアウト
});

この技術を使ったサンプルサイト

バリエーション
を見る

「機能」に関わる
動き一覧

書籍情報

紙面だからこそできるまとめ方でコードを説明し、
全体を俯瞰して調べることが出来る構成になっています。

もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。
購入をしてくださった方には特典がありますので是非チェックしてみてください!

書籍紙面サンプル

出版社:ソシム株式会社
2021/2/27 発売

書籍紙面サンプル

出版社:ソシム株式会社
2021/7/31 発売

Page
Top