<!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;
z-index: 999;
width: 100%;
height: 100%;
background:#222;
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: 5px;
}
/*========= レイアウトのための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名を指定
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").delay(1000).fadeOut(1000); //アニメーションが終わったら#splashエリアをフェードアウト
});
//# sourceURL=pen.js</script>
</body>
</html>