ローディング | イセンチュートリアルサイト

カテゴリーページ

HTMLの書き方

head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/4-1-3.css">

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>

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>

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エリアをフェードアウト
});

投稿日：2022年07月15日

数字カウントアップ

カテゴリー：ローディング

動きを確認する

HTMLの書き方

head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/4-1-1.css">

body内のローディングを表示させたい場所に以下のHTMLを記載します。

<div id="splash">
	<div id="splash_text"></div>
<!--/splash--></div>
<div id="container">
	<p>ローディング後、この画面が見えます。</p>
<!--/container--></div>

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-1.js"></script>

CSSの書き方

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

JSの書き方

var bar = new ProgressBar.Line(splash_text, {//id名を指定
	strokeWidth: 0,//進捗ゲージの太さ
	duration: 1000,//時間指定(1000＝1秒)
	trailWidth: 0,//線の太さ
	text: {//テキストの形状を直接指定	
		style: {//天地中央に配置
			position:'absolute',
			left:'50%',
			top:'50%',
			padding:'0',
			margin:'0',
			transform:'translate(-50%,-50%)',
			'font-size':'1.2rem',
			color:'#fff',
		},
	autoStyleContainer: false //自動付与のスタイルを切る
	},
	step: function(state, bar) {
		bar.setText(Math.round(bar.value() * 100) + ' %'); //テキストの数値
	}
});

//アニメーションスタート
bar.animate(1.0, function () {//バーを描画する割合を指定します 1.0 なら100%まで描画します
	$("#splash").delay(500).fadeOut(800);//アニメーションが終わったら#splashエリアをフェードアウト
});

投稿日：2022年07月15日

ローディング画面（プログレスバー＋数字カウントアップ）

カテゴリー：ローディング

html

<div id="splash">
	<div id="splash_text">
	</div>
</div>

<div id="container">
	<p>ローディング後、この画面が見えます。</p>
</div>

css

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

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

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


/*========= レイアウトのためのCSS ===============*/

#container {
	width: 100%;
	height: 100vh;
	background: #ccc;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

a {
	color: #333;
}

a:hover {
	text-decoration: none;
}

//テキストのカウントアップ+バーの設定
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").delay(500).fadeOut(800); //アニメーションが終わったら#splashエリアをフェードアウト
});

引用元：https://coco-factory.jp/ugokuweb/move01/4-1-2/

投稿日：2022年04月06日

JS

カテゴリーページ

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

数字カウントアップ

ローディング画面（プログレスバー＋数字カウントアップ）

アーカイブ