<!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>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'>
</script>
<style>@charset "utf-8";
/*========= LoadingのためのCSS ===============*/
/* Loading背景画面設定 */
#splash {
/*fixedで全面に固定*/
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
background: #222;
text-align: center;
color: #fff;
}
/*========= レイアウトのためのCSS ===============*/
#container {
width: 100%;
height: 100vh;
background: #777;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
a {
color: #222;
}
a:hover {
text-decoration: none;
}</style>
</head>
<body>
<div id="splash">
<div id="splash_text">
</div>
</div>
<main>
<div id="container">
<p>ローディング後、この画面が見えます。<br>
<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名を指定
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': '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(1000).fadeOut(1000); //アニメーションが終わったら#splashエリアをフェードアウト
});
//# sourceURL=pen.js</script>
</body>
</html>