質問編集履歴

3

テキスト修正

2023/02/02 14:47

投稿

Fukusuke0604
Fukusuke0604

スコア552

test CHANGED
File without changes
test CHANGED
@@ -125,7 +125,7 @@
125
125
 
126
126
 
127
127
  以下のように書き換えてみたのですが、今度は<div id="loading>にクラスが付与されず、ローディング画面が
128
- 消えません。。。。
128
+ 消えません。。。。コードはネットの記事から参照しています。
129
129
  ```html
130
130
  <div id="loading">
131
131
  <div class="spinner"></div>

2

テキスト更新

2023/02/02 14:46

投稿

Fukusuke0604
Fukusuke0604

スコア552

test CHANGED
File without changes
test CHANGED
@@ -123,6 +123,58 @@
123
123
  ```
124
124
  しかし、先方からページの読み込みに時間がかかる場合のみ、ローディングのアニメーションが表示が可能でしょうか?という相談を受けております。
125
125
 
126
+
126
- 色々ネット記事はあるのですが、「ページの読み込み時間かかる場合のみ」という内容の記事は見当たりませんでした。
127
+ 以下ように書き換えてみたのですが、今度は<div id="loading>クラス付与されず、ローディング画面が
128
+ 消えません。。。。
129
+ ```html
130
+ <div id="loading">
131
+ <div class="spinner"></div>
132
+ </div>
133
+ ```
134
+
135
+ ```javascript
136
+ window.onload = function() {
137
+ const spinner = document.getElementById('loading');
138
+ // Add .loaded to .loading
139
+ spinner.classList.add('loaded');
140
+ }
141
+ ```
142
+
143
+ ```css
144
+ /* Loading Block */
145
+ #loading {
146
+ width: 100vw;
147
+ height: 100vh;
148
+ transition: all 1s;
149
+ background-color: #0bd;
150
+ position: fixed;
151
+ top: 0;
152
+ left: 0;
153
+ z-index: 9999;
154
+ }
155
+ .spinner {
156
+ width: 100px;
157
+ height: 100px;
158
+ margin: 200px auto;
159
+ background-color: #fff;
160
+ border-radius: 100%;
161
+ animation: sk-scaleout 1.0s infinite ease-in-out;
162
+ }
163
+ /* Loading Animation */
164
+ @keyframes sk-scaleout {
165
+ 0% {
166
+ transform: scale(0);
167
+ } 100% {
168
+ transform: scale(1.0);
169
+ opacity: 0;
170
+ }
171
+ }
172
+
173
+ /* Hide Loading Block */
174
+ .loaded {
175
+ opacity: 0;
176
+ visibility: hidden;
177
+ }
178
+ ```
127
179
 
128
180
  ページの読み込みに時間がかかる場合のみ、ローディングのアニメーションを実装可能でご教授お願いします。

1

タイトル修正

2023/02/02 14:38

投稿

Fukusuke0604
Fukusuke0604

スコア552

test CHANGED
@@ -1 +1 @@
1
- Jquery ページの読み込みに時間がかかる場合のみ、ローディングのアニメーションが表示が可能でしょうか?
1
+ jQuery(JavaScript)を使ってページの読み込みに時間がかかる場合のみ、ローディングのアニメーションが表示が可能でしょうか?
test CHANGED
File without changes