loading

+@keyframes loading {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    25% {
+        transform: rotate(90deg);
+    }
+
+    50% {
+        transform: rotate(180deg);
+    }
+
+    75% {
+        transform: rotate(270deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
 .grade-detail-page {
     .grade-graph {
         width: 100%;
@@ -7,13 +29,14 @@
     }
 
     .loading-mask {
+        margin-top: 104px;
         width: 100%;
-        height: 500px;
+        height: 502px;
         position: fixed;
         top: 0;
         left: 0;
         z-index: 2;
-        background-color: #2b2b2b;
+        background-color: #444;
         display: flex;
         flex-direction: column;
         justify-content: center;
@@ -22,8 +45,10 @@
         .loading-logo {
             width: 80px;
             height: 80px;
-            background: resolve("activity/grade/loading.gif");
+            background: resolve("activity/grade/loading2.png");
             background-size: 100%;
+            animation: loading 1.5s infinite;
+            animation-timing-function: linear;
         }
 
         .loading-text {