ローディングアニメーションの表示がうまくされない

#ローディングアニメーションの表示がうまくされない

予定

https://connoratherton.com/loaders
こちらのサイトにある左上の三点ローダーを実装予定です。

##現状
https://github.com/ConnorAtherton/loaders.cssのUsageにある
・loaders.min.cssの読み込み
・loaders.css.jsの読み込み
をしています。

##問題点
画面を読み込み完了してもずっとロード画面が表示されている。
ネット上のサンプルページに同じコードを貼り付けたところ、全画面ではなく、一部要素のみにしかこのローディング画面が表示されなかった。

現状コード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="./css/style.css">
7  <link rel="stylesheet" href="./css/loaders.min.css">
8  <title>test</title>
9</head>
10<body>
11  <header></header>
12  <main>
13
14    <!-- ローダー -->
15    <div class="loader">
16      <div class="ball-pulse">
17        <div></div>
18        <div></div>
19        <div></div>
20      </div>
21    </div>
22    <!-- ローダー -->
23
24    <section>
25      <h1>example</h1>
26    </section>
27  </main>
28  <script src="./js/loaders.css.js"></script>
29</body>
30</html>

css
1.loader {
2  background-color: #00103e;
3  width: 100vw;
4  height: 100vh;
5  display: flex;
6  justify-content: center;
7  align-items: center;
8}

解決法のご教授をお願いいたします。

kmtr

2020/08/19 13:28

codepenで再現いただくことはかのうでしょうか?

phper

2020/08/19 13:43

ご連絡ありがとうございます。明日の午前にはコードペンで作成致します

yumetodo

2020/08/19 13:51

https://codepen.io/yumetodo/pen/OJNRgKd 雑に再現したけど、でっていう。 > 画面を読み込み完了してもずっとロード画面が表示されている。その処理をしてるJSを提示してください。 > 全画面ではなくそういうCSSが見当たらないのでCSSの提示もお願いします。

行動規範の内容に同意します

回答1件

自己解決

ネット上のローダーjavascriptのテンプレートと、CSSを見直したところ問題なく表示されました。

html
1<!DOCTYPE html>
2<html lang="jp">
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="./css/reset.css">
7  <link rel="stylesheet" href="./css/style.css">
8  <link rel="stylesheet" href="./css/loaders.min.css">
9  <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script></script>
10</head>
11<body class="top">
12  <header class="pc_header">
13    <div class="header_inner">
14      <h1 class=header_logo><a href="/"><img src="img/logo.png" alt="logo"></a></h1>
15      <nav class="global_navi">
16        <ul class="navi">
17          <li class="navi_list"><a href="" class="navi_link">業務案内</a></li>
18          <li class="navi_list"><a href="" class="navi_link">会社情報</a></li>
19          <li class="navi_list"><a href="" class="navi_link">ご挨拶</a></li>
20          <li class="navi_list"><a href="" class="navi_link">採用情報</a></li>
21          <li class="navi_list"><a href="" class="navi_link">お問い合わせ</a></li>
22        </ul>
23        <div class="header_btn_box">
24          <a href="" class="header_btn">000-000-0000<br><span>受付時間10:00～17:00</span></a>
25        </div>
26      </nav>
27    </div>
28  </header>
29  <main>
30    <!-- ローダー -->
31    <div id="loader-bg" class="is-hide loarders">
32      <div id="loader" class="is-hide loader">
33        <div class="line-scale-party">
34          <div></div>
35          <div></div>
36          <div></div>
37          <div></div>
38        </div>
39      </div>
40    </div>
41
42    <section class="page_head">
43      <img src="img/page_head_company.jpg" alt="">
44      <div class="page_head_ttl_box">
45        <h2 class="page_head_ttl">Company</h2>
46        <span class="page_head_ttl_sub">会社概要</span>
47      </div>
48    </section>
49    <section>
50      <div class="company_inner">
51        <table class="company_table">
52          <tbody>
53            <tr>
54              <th>商号</th>
55              <td>株式会社</td>
56            </tr>
57            <th>事業所</th>
58            <td>〒000-0000 東京都東京東京<br>TEL 000-000-0000</td>
59            </tr>
60
61          </tbody>
62        </table>
63      </div>
64    </section>
65  </main>
66  <footer>
67  </footer>
68  <script src="./js/script.js"></script>
69  <script src="./js/loaders.css.js"></script>
70</body>
71</html>
72

css
1.is-hide {
2    display: none;
3}
4
5.fadeout-bg {
6    transition-property: opacity;
7    transition-delay: .9s;
8    transition-duration: .8s;
9    opacity: 0;
10    pointer-events: none;
11}
12
13.fadeout-loader {
14    transition-property: opacity;
15    transition-delay: .9s;
16    transition-duration: .3s;
17    opacity: 0;
18    pointer-events: none;
19}
20
21#loader-bg {
22    background: #00103e;
23    height: 100%;
24    left: 0;
25    position: fixed;
26    top: 0;
27    width: 100%;
28    z-index: 100;
29}
30#loader {
31    height: 120px;
32    left: 50%;
33    margin-left: -60px;
34    margin-top: -60px;
35    position: fixed;
36    top: 50%;
37    width: 120px;
38}

javascript
1var bg = document.getElementById('loader-bg'),
2  loader = document.getElementById('loader');
3/* ロード画面の非表示を解除 */
4bg.classList.remove('is-hide');
5loader.classList.remove('is-hide');
6
7/* 読み込み完了 */
8window.addEventListener('load', stopload);
9
10/* 10秒経ったら強制的にロード画面を非表示にする */
11setTimeout('stopload()', 10000);
12
13/* ロード画面を非表示にする処理 */
14function stopload() {
15  bg.classList.add('fadeout-bg');
16  loader.classList.add('fadeout-loader');
17}