Webサイトのローディング画面が切り替わらない

前提

HTML/CSSでWebサイトを作っています。

実現したいこと

読み込み完了後にユーザーにサイトを閲覧してもらうため、ローディング画面を作ろうとしています。

発生している問題・エラーメッセージ

ローカル環境上では1秒程度でローディング画面が消えるのですが、試験的にサーバーにアップロードしてURLに実際にアクセスして確認してみると延々とローディング画面が表示されて一向に遷移しません。
PC/スマホ/タブレットすべてで試しましたがどれも同じくローディング画面がずっと表示されたままです。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3<head>
4<!-- ・・・ 以下コンテンツ略 ・・・ -->
5</head>
6<body>
7   <div id="loading">
8      <div class="sk-cube-grid">
9         <div class="sk-cube sk-cube1"></div>
10         <div class="sk-cube sk-cube2"></div>
11         <div class="sk-cube sk-cube3"></div>
12         <div class="sk-cube sk-cube4"></div>
13         <div class="sk-cube sk-cube5"></div>
14         <div class="sk-cube sk-cube6"></div>
15         <div class="sk-cube sk-cube7"></div>
16         <div class="sk-cube sk-cube8"></div>
17         <div class="sk-cube sk-cube9"></div>
18      </div>
19   </div>
20<div class="main">
21    <!-- ・・・ 以下コンテンツ略 ・・・ -->
22  </div>
23<script src="./js/loading.js"></script>
24 </body>

CSS
1#loading {
2	width: 100vw;
3	height: 100vh;
4	transition: all 2s;
5	position: fixed;
6	top: 0;
7	left: 0;
8	z-index: 9999;
9	background-color: #115e32;
10	display: flex;
11	flex-direction: column;
12	justify-content: center;
13	align-items: center;
14	margin: auto;
15}
16
17.loaded {
18	opacity: 0;
19	visibility: hidden;
20}
21
22.sk-cube-grid {
23	width: 40px;
24	height: 40px;
25  }
26  
27  .sk-cube-grid .sk-cube {
28	width: 33%;
29	height: 33%;
30	background-color: #ffffff;
31	float: left;
32	-webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
33			animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; 
34  }
35  .sk-cube-grid .sk-cube1 {
36	-webkit-animation-delay: 0.2s;
37			animation-delay: 0.2s; }
38  .sk-cube-grid .sk-cube2 {
39	-webkit-animation-delay: 0.3s;
40			animation-delay: 0.3s; }
41  .sk-cube-grid .sk-cube3 {
42	-webkit-animation-delay: 0.4s;
43			animation-delay: 0.4s; }
44  .sk-cube-grid .sk-cube4 {
45	-webkit-animation-delay: 0.1s;
46			animation-delay: 0.1s; }
47  .sk-cube-grid .sk-cube5 {
48	-webkit-animation-delay: 0.2s;
49			animation-delay: 0.2s; }
50  .sk-cube-grid .sk-cube6 {
51	-webkit-animation-delay: 0.3s;
52			animation-delay: 0.3s; }
53  .sk-cube-grid .sk-cube7 {
54	-webkit-animation-delay: 0s;
55			animation-delay: 0s; }
56  .sk-cube-grid .sk-cube8 {
57	-webkit-animation-delay: 0.1s;
58			animation-delay: 0.1s; }
59  .sk-cube-grid .sk-cube9 {
60	-webkit-animation-delay: 0.2s;
61			animation-delay: 0.2s; }
62  
63  @-webkit-keyframes sk-cubeGridScaleDelay {
64	0%, 70%, 100% {
65	  -webkit-transform: scale3D(1, 1, 1);
66			  transform: scale3D(1, 1, 1);
67	} 35% {
68	  -webkit-transform: scale3D(0, 0, 1);
69			  transform: scale3D(0, 0, 1); 
70	}
71  }
72  
73  @keyframes sk-cubeGridScaleDelay {
74	0%, 70%, 100% {
75	  -webkit-transform: scale3D(1, 1, 1);
76			  transform: scale3D(1, 1, 1);
77	} 35% {
78	  -webkit-transform: scale3D(0, 0, 1);
79			  transform: scale3D(0, 0, 1);
80	} 
81}

JavaScript
1window.onload = function() {
2    const spinner = document.getElementById('loading');
3    spinner.classList.add('loaded');
4}

試したこと

loading.jsをheadタグ内に配置させてみましたが改善されませんでした。

どうすれば解決できるのか、ご教授いただけますと幸いです。
よろしくお願いします。

m.ts10806

2022/08/12 09:51

Javascriptはこれで全てですか？カッコ閉じられてないように見えます。ブラウザの開発ツールコンソールにエラー出てるはずです

XinCii

2022/08/12 10:23

修正いたしました。ご指摘ありがとうございます。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！