質問編集履歴
1
ローディング画面を実現しているタグ構造とCSSを具体的に記述
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
重たい処理開始時に当該タグから非表示クラスを削除してローディング画面を表示、処理完了時に非表示クラスを再付与してローディング画面を非表示にする仕組みです。
|
|
5
5
|
ローディング画面表示/非表示の切り替え、および重たい処理はそれぞれ非同期処理として記述しています。
|
|
6
6
|
（重たい処理中にブラウザの画面描画が止まってしまうことを避ける意図です。）
|
|
7
|
+
なお、ローディング画面はスクリプトを使わず、タグとCSSのみで円がクルクル回るアニメーションを作成して実現しています。
|
|
7
8
|
|
|
8
9
|
|
|
9
10
|
### 発生している問題
|
|
@@ -28,10 +29,13 @@
|
|
|
28
29
|
<script src="js/main.js"></script>
|
|
29
30
|
|
|
30
31
|
<!-- ローディング画面領域 -->
|
|
31
|
-
<div class="loadingArea displayNon">
|
|
32
|
+
<div class="loadingArea displayNon layout subWindow loadingModal">
|
|
32
|
-
<div class="loadingBlock">
|
|
33
|
+
<div class="loadingBlock">
|
|
34
|
+
<div class="loadingContents">
|
|
35
|
+
</div>
|
|
36
|
+
</div>
|
|
33
37
|
</div>
|
|
34
|
-
|
|
38
|
+
|
|
35
39
|
|
|
36
40
|
<!-- 処理 -->
|
|
37
41
|
<script>
|
|
@@ -137,6 +141,31 @@
|
|
|
137
141
|
|
|
138
142
|
main.css
|
|
139
143
|
```CSS
|
|
144
|
+
.layout.subWindow.loadingModal {
|
|
145
|
+
z-index: 99; /* 奥行。ベースを拡張。メインコンテンツ(z-index0)より後に描画する。 */
|
|
146
|
+
background-color: rgba(204,204,204,0.8); /* 背景色。グレーベースの不透明度0.8で描画する。 */
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.loadingBlock {
|
|
150
|
+
position: absolute; /* ポジション指定。ウインドウに対して必ず上下左右中央揃えにする。 */
|
|
151
|
+
top: 50%; /* 上位置。上下中央となるようウインドウの50%位置に配置する。 */
|
|
152
|
+
left: 50%; /* 左位置。左右中央となるようウインドウの50%位置に配置する。 */
|
|
153
|
+
transform: translate(-50%, -50%); /* 空間指定。上下左右中央揃えにするため、要素の高さと幅の50%分上と左位置を調整する。 */
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.loadingContents {
|
|
157
|
+
width: 100px; /* 横幅。100pxとする。 */
|
|
158
|
+
height: 100px; /* 縦幅。100pxとする。 */
|
|
159
|
+
border-radius: 50%; /* 角の丸め。50%とする。 */
|
|
160
|
+
border: solid 4px; /* ボーダー。4pxの線とする。 */
|
|
161
|
+
border-color: #000000 #00000010 #00000010;; /* ボーダー色。三等分とする。 */
|
|
162
|
+
position: relative; /* ポジション指定。子要素群を相対位置指定可能とする。 */
|
|
163
|
+
animation-name: spin; /* アニメーション名。Spinとする。定義は別とする。 */
|
|
164
|
+
animation-duration: 1s; /* アニメーション時間。1秒間でアニメーションする。 */
|
|
165
|
+
animation-iteration-count: infinite; /* アニメーション間隔。無限とする。 */
|
|
166
|
+
animation-timing-function: linear; /* アニメーション動作。等速で動作する。 */
|
|
167
|
+
}
|
|
168
|
+
|
|
140
169
|
.displayNon {
|
|
141
170
|
display: none; /* ブロックレイアウト。指定した領域を非表示にする。 */
|
|
142
171
|
}
|