Showing
2 changed files
with
28 additions
and
3 deletions
public/img/activity/grade/loading2.png
0 → 100644

8.88 KB
1 | +@keyframes loading { | ||
2 | + 0% { | ||
3 | + transform: rotate(0deg); | ||
4 | + } | ||
5 | + | ||
6 | + 25% { | ||
7 | + transform: rotate(90deg); | ||
8 | + } | ||
9 | + | ||
10 | + 50% { | ||
11 | + transform: rotate(180deg); | ||
12 | + } | ||
13 | + | ||
14 | + 75% { | ||
15 | + transform: rotate(270deg); | ||
16 | + } | ||
17 | + | ||
18 | + 100% { | ||
19 | + transform: rotate(360deg); | ||
20 | + } | ||
21 | +} | ||
22 | + | ||
1 | .grade-detail-page { | 23 | .grade-detail-page { |
2 | .grade-graph { | 24 | .grade-graph { |
3 | width: 100%; | 25 | width: 100%; |
@@ -7,13 +29,14 @@ | @@ -7,13 +29,14 @@ | ||
7 | } | 29 | } |
8 | 30 | ||
9 | .loading-mask { | 31 | .loading-mask { |
32 | + margin-top: 104px; | ||
10 | width: 100%; | 33 | width: 100%; |
11 | - height: 500px; | 34 | + height: 502px; |
12 | position: fixed; | 35 | position: fixed; |
13 | top: 0; | 36 | top: 0; |
14 | left: 0; | 37 | left: 0; |
15 | z-index: 2; | 38 | z-index: 2; |
16 | - background-color: #2b2b2b; | 39 | + background-color: #444; |
17 | display: flex; | 40 | display: flex; |
18 | flex-direction: column; | 41 | flex-direction: column; |
19 | justify-content: center; | 42 | justify-content: center; |
@@ -22,8 +45,10 @@ | @@ -22,8 +45,10 @@ | ||
22 | .loading-logo { | 45 | .loading-logo { |
23 | width: 80px; | 46 | width: 80px; |
24 | height: 80px; | 47 | height: 80px; |
25 | - background: resolve("activity/grade/loading.gif"); | 48 | + background: resolve("activity/grade/loading2.png"); |
26 | background-size: 100%; | 49 | background-size: 100%; |
50 | + animation: loading 1.5s infinite; | ||
51 | + animation-timing-function: linear; | ||
27 | } | 52 | } |
28 | 53 | ||
29 | .loading-text { | 54 | .loading-text { |
-
Please register or login to post a comment