質問編集履歴
3
テキスト修正
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
テキスト更新
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
タイトル修正
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
jQuery（JavaScript）を使ってページの読み込みに時間がかかる場合のみ、ローディングのアニメーションが表示が可能でしょうか？
|
test
CHANGED
|
File without changes
|