|
@@ -0,0 +1,78 @@
|
|
|
|
+.lds-grid {
|
|
|
|
+ position: absolute;
|
|
|
|
+ display: block;
|
|
|
|
+ left: calc(50% - 40px);
|
|
|
|
+ top: calc(50% - 90px);
|
|
|
|
+ width: 80px;
|
|
|
|
+ height: 80px;
|
|
|
|
+}
|
|
|
|
+.lds-grid div {
|
|
|
|
+ position: absolute;
|
|
|
|
+ width: 16px;
|
|
|
|
+ height: 16px;
|
|
|
|
+ border-radius: 50%;
|
|
|
|
+ background: #737374;
|
|
|
|
+ animation: lds-grid 1.2s linear infinite;
|
|
|
|
+}
|
|
|
|
+.lds-grid div:nth-child(1) {
|
|
|
|
+ top: 8px;
|
|
|
|
+ left: 8px;
|
|
|
|
+ animation-delay: 0s;
|
|
|
|
+}
|
|
|
|
+.lds-grid div:nth-child(2) {
|
|
|
|
+ top: 8px;
|
|
|
|
+ left: 32px;
|
|
|
|
+ animation-delay: -0.4s;
|
|
|
|
+}
|
|
|
|
+.lds-grid div:nth-child(3) {
|
|
|
|
+ top: 8px;
|
|
|
|
+ left: 56px;
|
|
|
|
+ animation-delay: -0.8s;
|
|
|
|
+}
|
|
|
|
+.lds-grid div:nth-child(4) {
|
|
|
|
+ top: 32px;
|
|
|
|
+ left: 8px;
|
|
|
|
+ animation-delay: -0.4s;
|
|
|
|
+}
|
|
|
|
+.lds-grid div:nth-child(5) {
|
|
|
|
+ top: 32px;
|
|
|
|
+ left: 32px;
|
|
|
|
+ animation-delay: -0.8s;
|
|
|
|
+}
|
|
|
|
+.lds-grid div:nth-child(6) {
|
|
|
|
+ top: 32px;
|
|
|
|
+ left: 56px;
|
|
|
|
+ animation-delay: -1.2s;
|
|
|
|
+}
|
|
|
|
+.lds-grid div:nth-child(7) {
|
|
|
|
+ top: 56px;
|
|
|
|
+ left: 8px;
|
|
|
|
+ animation-delay: -0.8s;
|
|
|
|
+}
|
|
|
|
+.lds-grid div:nth-child(8) {
|
|
|
|
+ top: 56px;
|
|
|
|
+ left: 32px;
|
|
|
|
+ animation-delay: -1.2s;
|
|
|
|
+}
|
|
|
|
+.lds-grid div:nth-child(9) {
|
|
|
|
+ top: 56px;
|
|
|
|
+ left: 56px;
|
|
|
|
+ animation-delay: -1.6s;
|
|
|
|
+}
|
|
|
|
+.lds-grid div:nth-child(10) {
|
|
|
|
+ display: none;
|
|
|
|
+}
|
|
|
|
+.lds-grid div:nth-child(11) {
|
|
|
|
+ display: none;
|
|
|
|
+}
|
|
|
|
+.lds-grid div:nth-child(12) {
|
|
|
|
+ display: none;
|
|
|
|
+}
|
|
|
|
+@keyframes lds-grid {
|
|
|
|
+ 0%, 100% {
|
|
|
|
+ opacity: 1;
|
|
|
|
+ }
|
|
|
|
+ 50% {
|
|
|
|
+ opacity: 0.5;
|
|
|
|
+ }
|
|
|
|
+}
|