「テンプレート:テスト2/style.css」の版間の差分

テンプレート:テスト2/style.css (編集)

159 バイト除去、 2年3月30日 (ヰ)

編集の要約なし

8,829

回編集

@@ 1行目: / 1行目: @@
-.gradation {
+.loading {
-  animation: grad linear infinite alternate;
+    position: absolute;
-  animation-duration: 1s;
+    top: 50%;
+    left: 5%;
+    transform: translateY(-50%);
+    border: 3px solid #fafafa;
+    border-top: 3px solid #3498db;
+    border-radius: 50%;
+    width: 24px;
+    height: 24px;
+    animation: spin 1s linear infinite;
 }
-@keyframes grad{
+@keyframes spin {
-%{
+% {
-		background:linear-gradient(0deg, blue 50%, pink)
+        transform: translateY(-50%) rotate(0deg);
-	}
+    }
-%{
-		background:linear-gradient(36deg, blue 50%, pink)
+% {
-	}
+        transform: translateY(-50%) rotate(60deg);
-%{
+    }
-		background:linear-gradient(72deg, blue 50%, pink)
-	}
+% {
-%{
+        transform: translateY(-50%) rotate(180deg);
-		background:linear-gradient(108deg, blue 50%, pink)
+    }
-	}
-%{
+% {
-		background:linear-gradient(144deg, blue 50%, pink)
+        transform: translateY(-50%) rotate(300deg);
-	}
+    }
-%{
-		background:linear-gradient(180deg, blue 50%, pink)
+% {
-	}
+        transform: translateY(-50%) rotate(360deg);
-%{
+    }
-		background:linear-gradient(216deg, blue 50%, pink)
-	}
-%{
-		background:linear-gradient(252deg, blue 50%, pink)
-	}
-%{
-		background:linear-gradient(288deg, blue 50%, pink)
-	}
-%{
-		background:linear-gradient(324deg, blue 50%, pink)
-	}
-%{
-		background:linear-gradient(360deg, blue 50%, pink)
-	}
 }