<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/progressbar.js@1.1.1/dist/progressbar.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.23.5/babel.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/polyfill/3.111.0/polyfill.min.js">
</script>
<style>@charset "utf-8";
/*========= 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: 5px;
}
/*割れる画面のアニメーション*/
.loader_cover {
width: 100%;
height: 50%;
background-color: #333;
transition: all 5.0s cubic-bezier(0, 1, .5, .5);
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);
}
/*========= レイアウトのための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;
}</style>
</head>
<body>
<div id="splash">
<div id="splash_text">
</div>
<div class="loader_cover loader_cover-up">
</div>
<div class="loader_cover loader_cover-down">
</div>
</div>
<main>
<div id="container">
<p>ローディング後、この画面が見えます。<br>ローディングで使用したライブラリ：<a href="https://kimmobrunfeldt.github.io/progressbar.js/" target="_blank">https://kimmobrunfeldt.github.io/progressbar.js/</a>
</p>
<!--/container-->
</div>
</main>
<!--==============JQuery読み込み===============-->
<!--プログレスバーライブラリ-->
<!--IE11用※対応しなければ削除してください-->
<script>//テキストのカウントアップ+バーの設定
var bar = new ProgressBar.Line(splash_text, { //id名を指定
easing: 'easeInOut', //アニメーション効果linear、easeIn、easeOut、easeInOutが指定可能
duration: 3000, //時間指定(1000＝1秒)
strokeWidth: 0.9, //進捗ゲージの太さ
color: 'lime', //進捗ゲージのカラー
trailWidth: 0.9, //ゲージベースの線の太さ
trailColor: '#555', //ゲージベースの線のカラー
text: { //テキストの形状を直接指定
style: { //天地中央に配置
position: 'absolute',
left: '50%',
top: '50%',
padding: '0',
margin: '-30px 0 0 0', //バーより上に配置
transform: 'translate(-50%,-50%)',
'font-size': '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_text").fadeOut(10); //フェードアウトでローディングテキストを削除
$(".loader_cover-up").addClass("coveranime"); //カバーが上に上がるクラス追加
$(".loader_cover-down").addClass("coveranime"); //カバーが下に下がるクラス追加
$("#splash").fadeOut(); //#splashエリアをフェードアウト
});
//# sourceURL=pen.js</script>
</body>
</html>