【コピペでOK】javascriptでいい感じのロード画面を実装したい！

WEBサイトを開くとたまにページを読み込む前にロード画面が出てきますよね。

読み込む間にそういったアニメーションを入れることでユーザーの待ち時間のストレスを軽減することができます。

今回は擬似的にローディングアニメーションをページ読み込み前に表示させるコードを紹介します。

サンプルホワイトver

サンプルグレーver

必要コード

※各コードの右上にあるアイコンでコピーができます。

今回はcssとjsを読み込むので、コピペした後に相対パスが正しいか確認してください。

↓サンプルコーディングデータをDLしたい方はこちら↓

ロード画面ホワイトverコーディングデータ

1 ファイル 3.86 KB

ダウンロード

ロード画面グレーverコーディングデータ

1 ファイル 3.86 KB

ダウンロード

html

<head>〜</head>内

まずはcssの読み込み

<!--====レイアウトを制御する独自のCSSを読み込み====-->
<link href="css/load.css" rel="stylesheet">
<!--====レイアウトを制御する独自のCSSを読み込み====-->

<body>開始タグ直後

<!--====ページ読み込み前のロード画面====-->
<div id="page_loading">
<div id="load_area">
<div class="loader">Loading...</div>
<div id="page_loading_text"></div>
<p class="load_p">
<span class="load_h">
キャンペーン中につき<br>現在注文が殺到しております。
</span>
ただいまアクセスが集中しておりますので、<br>
ページの表示までに数秒お時間<br class="load_spbr">いただく場合がございます。
</p>
</div>
</div>
<!--====END ページ読み込み前のロード画面====-->

<body>終了タグ直前もしくは<body>のなるべく下

<!--==============ロード画面のJQuery読み込み===============-->
<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/load.js"></script>
<!--==============END ロード画面のJQuery読み込み===============-->

CSS

htmlのheadタグで読み込んだcssの中身になります。

新規で「load.css」を作るか、既存のcssに適宜調整しながら追加してください。

load.css（ホワイトデザインver）


@charset "utf-8";

/*========= LoadingのためのCSS ===============*/
body {
    padding: 0;
    margin: 0;
}
/* Loading背景画面設定　*/

#page_loading {
    /*fixedで全面に固定*/
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  background:#fff;
  text-align:center;
  color:#fff;
	font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif!important;
}

/* Loadingバー中央配置　*/
#load_area {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 999;
	width: 100%;
	transform: translate(-50%, -50%);
	color: #2e2e2e;
}
#page_loading_text {
	width: 40%;
	color: #fff;
	margin: auto;
}
.load_spbr{
	display:none;
}
.load_h{
	font-size:20px;
	font-weight: bold;
	display: block;
	padding:10px 0 16px;
}
p.load_p{
	font-size:14px;
		font-weight: 500;
}
@media screen and (max-width: 800px) {
.load_spbr{
	display:block;
}
}
/*IE11対策用バーの線の高さ※対応しなければ削除してください*/
#page_loading_text svg {
    height: 12px;
    border-radius: 10px;
}

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


#container{
    width:100%;
    height: 100vh;
    background: #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.progressbar-text {
    position: relative!important;
    left: 0!important;
    top: 0!important;
    padding: 0!important;
    margin: auto!important;
    transform: none!important;
    font-size: 1rem!important;
    color: #2e2e2e!important;
	margin-top: 10px!important;
}


a{
    color: #333;
}

a:hover{
     text-decoration: none;   
}



.loader {
	margin: auto;
	margin-bottom: 60px;
	font-size: 15px;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	/*position: relative;*/
	text-indent: -9999em;
	-webkit-animation: load5 1.1s infinite ease;
	animation: load5 1.1s infinite ease;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
}
@-webkit-keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #2e2e2e, 1.8em -1.8em 0 0em rgba(50, 50, 50, 0.2), 2.5em 0em 0 0em rgba(50, 50, 50, 0.2), 1.75em 1.75em 0 0em rgba(50, 50, 50, 0.2), 0em 2.5em 0 0em rgba(50, 50, 50, 0.2), -1.8em 1.8em 0 0em rgba(50, 50, 50, 0.2), -2.6em 0em 0 0em rgba(50, 50, 50, 0.5), -1.8em -1.8em 0 0em rgba(50, 50, 50, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(50, 50, 50, 0.7), 1.8em -1.8em 0 0em #2e2e2e, 2.5em 0em 0 0em rgba(50, 50, 50, 0.2), 1.75em 1.75em 0 0em rgba(50, 50, 50, 0.2), 0em 2.5em 0 0em rgba(50, 50, 50, 0.2), -1.8em 1.8em 0 0em rgba(50, 50, 50, 0.2), -2.6em 0em 0 0em rgba(50, 50, 50, 0.2), -1.8em -1.8em 0 0em rgba(50, 50, 50, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(50, 50, 50, 0.5), 1.8em -1.8em 0 0em rgba(50, 50, 50, 0.7), 2.5em 0em 0 0em #2e2e2e, 1.75em 1.75em 0 0em rgba(50, 50, 50, 0.2), 0em 2.5em 0 0em rgba(50, 50, 50, 0.2), -1.8em 1.8em 0 0em rgba(50, 50, 50, 0.2), -2.6em 0em 0 0em rgba(50, 50, 50, 0.2), -1.8em -1.8em 0 0em rgba(50, 50, 50, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(50, 50, 50, 0.2), 1.8em -1.8em 0 0em rgba(50, 50, 50, 0.5), 2.5em 0em 0 0em rgba(50, 50, 50, 0.7), 1.75em 1.75em 0 0em #2e2e2e, 0em 2.5em 0 0em rgba(50, 50, 50, 0.2), -1.8em 1.8em 0 0em rgba(50, 50, 50, 0.2), -2.6em 0em 0 0em rgba(50, 50, 50, 0.2), -1.8em -1.8em 0 0em rgba(50, 50, 50, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(50, 50, 50, 0.2), 1.8em -1.8em 0 0em rgba(50, 50, 50, 0.2), 2.5em 0em 0 0em rgba(50, 50, 50, 0.5), 1.75em 1.75em 0 0em rgba(50, 50, 50, 0.7), 0em 2.5em 0 0em #2e2e2e, -1.8em 1.8em 0 0em rgba(50, 50, 50, 0.2), -2.6em 0em 0 0em rgba(50, 50, 50, 0.2), -1.8em -1.8em 0 0em rgba(50, 50, 50, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(50, 50, 50, 0.2), 1.8em -1.8em 0 0em rgba(50, 50, 50, 0.2), 2.5em 0em 0 0em rgba(50, 50, 50, 0.2), 1.75em 1.75em 0 0em rgba(50, 50, 50, 0.5), 0em 2.5em 0 0em rgba(50, 50, 50, 0.7), -1.8em 1.8em 0 0em #2e2e2e, -2.6em 0em 0 0em rgba(50, 50, 50, 0.2), -1.8em -1.8em 0 0em rgba(50, 50, 50, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(50, 50, 50, 0.2), 1.8em -1.8em 0 0em rgba(50, 50, 50, 0.2), 2.5em 0em 0 0em rgba(50, 50, 50, 0.2), 1.75em 1.75em 0 0em rgba(50, 50, 50, 0.2), 0em 2.5em 0 0em rgba(50, 50, 50, 0.5), -1.8em 1.8em 0 0em rgba(50, 50, 50, 0.7), -2.6em 0em 0 0em #2e2e2e, -1.8em -1.8em 0 0em rgba(50, 50, 50, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(50, 50, 50, 0.2), 1.8em -1.8em 0 0em rgba(50, 50, 50, 0.2), 2.5em 0em 0 0em rgba(50, 50, 50, 0.2), 1.75em 1.75em 0 0em rgba(50, 50, 50, 0.2), 0em 2.5em 0 0em rgba(50, 50, 50, 0.2), -1.8em 1.8em 0 0em rgba(50, 50, 50, 0.5), -2.6em 0em 0 0em rgba(50, 50, 50, 0.7), -1.8em -1.8em 0 0em #2e2e2e;
  }
}
@keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #2e2e2e, 1.8em -1.8em 0 0em rgba(50, 50, 50, 0.2), 2.5em 0em 0 0em rgba(50, 50, 50, 0.2), 1.75em 1.75em 0 0em rgba(50, 50, 50, 0.2), 0em 2.5em 0 0em rgba(50, 50, 50, 0.2), -1.8em 1.8em 0 0em rgba(50, 50, 50, 0.2), -2.6em 0em 0 0em rgba(50, 50, 50, 0.5), -1.8em -1.8em 0 0em rgba(50, 50, 50, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(50, 50, 50, 0.7), 1.8em -1.8em 0 0em #2e2e2e, 2.5em 0em 0 0em rgba(50, 50, 50, 0.2), 1.75em 1.75em 0 0em rgba(50, 50, 50, 0.2), 0em 2.5em 0 0em rgba(50, 50, 50, 0.2), -1.8em 1.8em 0 0em rgba(50, 50, 50, 0.2), -2.6em 0em 0 0em rgba(50, 50, 50, 0.2), -1.8em -1.8em 0 0em rgba(50, 50, 50, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(50, 50, 50, 0.5), 1.8em -1.8em 0 0em rgba(50, 50, 50, 0.7), 2.5em 0em 0 0em #2e2e2e, 1.75em 1.75em 0 0em rgba(50, 50, 50, 0.2), 0em 2.5em 0 0em rgba(50, 50, 50, 0.2), -1.8em 1.8em 0 0em rgba(50, 50, 50, 0.2), -2.6em 0em 0 0em rgba(50, 50, 50, 0.2), -1.8em -1.8em 0 0em rgba(50, 50, 50, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(50, 50, 50, 0.2), 1.8em -1.8em 0 0em rgba(50, 50, 50, 0.5), 2.5em 0em 0 0em rgba(50, 50, 50, 0.7), 1.75em 1.75em 0 0em #2e2e2e, 0em 2.5em 0 0em rgba(50, 50, 50, 0.2), -1.8em 1.8em 0 0em rgba(50, 50, 50, 0.2), -2.6em 0em 0 0em rgba(50, 50, 50, 0.2), -1.8em -1.8em 0 0em rgba(50, 50, 50, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(50, 50, 50, 0.2), 1.8em -1.8em 0 0em rgba(50, 50, 50, 0.2), 2.5em 0em 0 0em rgba(50, 50, 50, 0.5), 1.75em 1.75em 0 0em rgba(50, 50, 50, 0.7), 0em 2.5em 0 0em #2e2e2e, -1.8em 1.8em 0 0em rgba(50, 50, 50, 0.2), -2.6em 0em 0 0em rgba(50, 50, 50, 0.2), -1.8em -1.8em 0 0em rgba(50, 50, 50, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(50, 50, 50, 0.2), 1.8em -1.8em 0 0em rgba(50, 50, 50, 0.2), 2.5em 0em 0 0em rgba(50, 50, 50, 0.2), 1.75em 1.75em 0 0em rgba(50, 50, 50, 0.5), 0em 2.5em 0 0em rgba(50, 50, 50, 0.7), -1.8em 1.8em 0 0em #2e2e2e, -2.6em 0em 0 0em rgba(50, 50, 50, 0.2), -1.8em -1.8em 0 0em rgba(50, 50, 50, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(50, 50, 50, 0.2), 1.8em -1.8em 0 0em rgba(50, 50, 50, 0.2), 2.5em 0em 0 0em rgba(50, 50, 50, 0.2), 1.75em 1.75em 0 0em rgba(50, 50, 50, 0.2), 0em 2.5em 0 0em rgba(50, 50, 50, 0.5), -1.8em 1.8em 0 0em rgba(50, 50, 50, 0.7), -2.6em 0em 0 0em #2e2e2e, -1.8em -1.8em 0 0em rgba(50, 50, 50, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(50, 50, 50, 0.2), 1.8em -1.8em 0 0em rgba(50, 50, 50, 0.2), 2.5em 0em 0 0em rgba(50, 50, 50, 0.2), 1.75em 1.75em 0 0em rgba(50, 50, 50, 0.2), 0em 2.5em 0 0em rgba(50, 50, 50, 0.2), -1.8em 1.8em 0 0em rgba(50, 50, 50, 0.5), -2.6em 0em 0 0em rgba(50, 50, 50, 0.7), -1.8em -1.8em 0 0em #2e2e2e;
  }
}
/*========= END LoadingのためのCSS ===============*/

load.css（グレーデザインver）


@charset "utf-8";


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

body {
    padding: 0;
    margin: 0;
}
/* Loading背景画面設定　*/

#page_loading {
    /*fixedで全面に固定*/
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  background:#333;
  text-align:center;
  color:#fff;
font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif!important;
}

/* Loadingバー中央配置　*/
#load_area {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 999;
	width: 100%;
	transform: translate(-50%, -50%);
	color: #fff;
}
#page_loading_text {
	width: 40%;
	color: #fff;
	margin: auto;
}
.load_spbr{
	display:none;
}
.load_h{
	font-size:20px;
	font-weight: bold;
	display: block;
	padding:10px 0 16px;
}
p.load_p{
	font-size:14px;
		font-weight: 500;
}
@media screen and (max-width: 800px) {
.load_spbr{
	display:block;
}
}
/*IE11対策用バーの線の高さ※対応しなければ削除してください*/
#page_loading_text svg {
    height: 12px;
    border-radius: 10px;
}

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


#container{
    width:100%;
    height: 100vh;
    background: #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.progressbar-text {
    position: relative!important;
    left: 0!important;
    top: 0!important;
    padding: 0!important;
    margin: auto!important;
    transform: none!important;
    font-size: 1rem!important;
    color: rgb(255, 255, 255)!important;
	margin-top: 10px!important;
}


a{
    color: #333;
}

a:hover{
     text-decoration: none;   
}



.loader {
	margin: auto;
	margin-bottom: 60px;
	font-size: 15px;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	/*position: relative;*/
	text-indent: -9999em;
	-webkit-animation: load5 1.1s infinite ease;
	animation: load5 1.1s infinite ease;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
}
@-webkit-keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
  }
}
@keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
  }
}
/*========= END LoadingのためのCSS ===============*/

javascript

htmlのbody終了タグ前で読み込んだjsの中身になります。

新規で「load.js」を作るか、htmlに直接スクリプト（<script></script>で囲む）を書くか

適宜調節してください。

load.js


//テキストのカウントアップ+バーの設定
var bar = new ProgressBar.Line(page_loading_text, {//id名を指定
  easing: 'easeInOut',//アニメーション効果linear、easeIn、easeOut、easeInOutが指定可能
  duration: 2500,//時間指定(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%まで描画します
  $("#page_loading").delay(500).fadeOut(800);//アニメーションが終わったら#page_loadingエリアをフェードアウト
});

ロード時間はデフォルトで2.5秒に設定していますが、変更する場合は

「load.js」の「duration: 2500,//時間指定(1000＝1秒)」ここの2500を変更してください。

1000で1秒、5000で5秒になります。