Add a new loading animation what called circles

Author: PeachScript

src/components/InfiniteLoading.vue

@@ -228,6 +228,118 @@
     animation: linear icon-rotating .85s infinite;
   }
 
+  .icon-circles{
+    position: relative;
+    &:before{
+      @size: 5px;
+      @radius: 12px;
+      @shallow: 8%;
+      @c-base: #505050;
+      content: '';
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      margin-top: -@size/2;
+      margin-left: -@size/2;
+      width: @size;
+      height: @size;
+      border-radius: 50%;
+      animation: linear icon-circles .75s infinite;
+      @keyframes icon-circles{
+        0%{
+          box-shadow: 0 -@radius 0 @c-base,
+                      @radius * 0.71 -@radius * 0.71 0 lighten(@c-base, @shallow),
+                      @radius 0 0 lighten(@c-base, @shallow * 2),
+                      @radius * 0.71 @radius * 0.71 0 lighten(@c-base, @shallow * 3),
+                      0 @radius 0 lighten(@c-base, @shallow * 4),
+                      -@radius * 0.71 @radius * 0.71 0 lighten(@c-base, @shallow * 5),
+                      -@radius 0 0 lighten(@c-base, @shallow * 6),
+                      -@radius * 0.71 -@radius * 0.71 0 lighten(@c-base, @shallow * 7);
+        }
+        12.5%{
+          box-shadow: 0 -@radius 0 lighten(@c-base, @shallow * 7),
+                      @radius * 0.71 -@radius * 0.71 0 @c-base,
+                      @radius 0 0 lighten(@c-base, @shallow * 1),
+                      @radius * 0.71 @radius * 0.71 0 lighten(@c-base, @shallow * 2),
+                      0 @radius 0 lighten(@c-base, @shallow * 3),
+                      -@radius * 0.71 @radius * 0.71 0 lighten(@c-base, @shallow * 4),
+                      -@radius 0 0 lighten(@c-base, @shallow * 5),
+                      -@radius * 0.71 -@radius * 0.71 0 lighten(@c-base, @shallow * 6);
+        }
+        25%{
+          box-shadow: 0 -@radius 0 lighten(@c-base, @shallow * 6),
+                      @radius * 0.71 -@radius * 0.71 0 lighten(@c-base, @shallow * 7),
+                      @radius 0 0 @c-base,
+                      @radius * 0.71 @radius * 0.71 0 lighten(@c-base, @shallow * 1),
+                      0 @radius 0 lighten(@c-base, @shallow * 2),
+                      -@radius * 0.71 @radius * 0.71 0 lighten(@c-base, @shallow * 3),
+                      -@radius 0 0 lighten(@c-base, @shallow * 4),
+                      -@radius * 0.71 -@radius * 0.71 0 lighten(@c-base, @shallow * 5);
+        }
+        37.5%{
+          box-shadow: 0 -@radius 0 lighten(@c-base, @shallow * 5),
+                      @radius * 0.71 -@radius * 0.71 0 lighten(@c-base, @shallow * 6),
+                      @radius 0 0 lighten(@c-base, @shallow * 7),
+                      @radius * 0.71 @radius * 0.71 0 @c-base,
+                      0 @radius 0 lighten(@c-base, @shallow * 1),
+                      -@radius * 0.71 @radius * 0.71 0 lighten(@c-base, @shallow * 2),
+                      -@radius 0 0 lighten(@c-base, @shallow * 3),
+                      -@radius * 0.71 -@radius * 0.71 0 lighten(@c-base, @shallow * 4);
+        }
+        50%{
+          box-shadow: 0 -@radius 0 lighten(@c-base, @shallow * 4),
+                      @radius * 0.71 -@radius * 0.71 0 lighten(@c-base, @shallow * 5),
+                      @radius 0 0 lighten(@c-base, @shallow * 6),
+                      @radius * 0.71 @radius * 0.71 0 lighten(@c-base, @shallow * 7),
+                      0 @radius 0 @c-base,
+                      -@radius * 0.71 @radius * 0.71 0 lighten(@c-base, @shallow * 1),
+                      -@radius 0 0 lighten(@c-base, @shallow * 2),
+                      -@radius * 0.71 -@radius * 0.71 0 lighten(@c-base, @shallow * 3);
+        }
+        62.5%{
+          box-shadow: 0 -@radius 0 lighten(@c-base, @shallow * 3),
+                      @radius * 0.71 -@radius * 0.71 0 lighten(@c-base, @shallow * 4),
+                      @radius 0 0 lighten(@c-base, @shallow * 5),
+                      @radius * 0.71 @radius * 0.71 0 lighten(@c-base, @shallow * 6),
+                      0 @radius 0 lighten(@c-base, @shallow * 7),
+                      -@radius * 0.71 @radius * 0.71 0 @c-base,
+                      -@radius 0 0 lighten(@c-base, @shallow * 1),
+                      -@radius * 0.71 -@radius * 0.71 0 lighten(@c-base, @shallow * 2);
+        }
+        75%{
+          box-shadow: 0 -@radius 0 lighten(@c-base, @shallow * 2),
+                      @radius * 0.71 -@radius * 0.71 0 lighten(@c-base, @shallow * 3),
+                      @radius 0 0 lighten(@c-base, @shallow * 4),
+                      @radius * 0.71 @radius * 0.71 0 lighten(@c-base, @shallow * 5),
+                      0 @radius 0 lighten(@c-base, @shallow * 6),
+                      -@radius * 0.71 @radius * 0.71 0 lighten(@c-base, @shallow * 7),
+                      -@radius 0 0 @c-base,
+                      -@radius * 0.71 -@radius * 0.71 0 lighten(@c-base, @shallow * 1);
+        }
+        87.5%{
+          box-shadow: 0 -@radius 0 lighten(@c-base, @shallow * 1),
+                      @radius * 0.71 -@radius * 0.71 0 lighten(@c-base, @shallow * 2),
+                      @radius 0 0 lighten(@c-base, @shallow * 3),
+                      @radius * 0.71 @radius * 0.71 0 lighten(@c-base, @shallow * 4),
+                      0 @radius 0 lighten(@c-base, @shallow * 5),
+                      -@radius * 0.71 @radius * 0.71 0 lighten(@c-base, @shallow * 6),
+                      -@radius 0 0 lighten(@c-base, @shallow * 7),
+                      -@radius * 0.71 -@radius * 0.71 0 @c-base;
+        }
+        100%{
+          box-shadow: 0 -@radius 0 @c-base,
+                      @radius * 0.71 -@radius * 0.71 0 lighten(@c-base, @shallow),
+                      @radius 0 0 lighten(@c-base, @shallow * 2),
+                      @radius * 0.71 @radius * 0.71 0 lighten(@c-base, @shallow * 3),
+                      0 @radius 0 lighten(@c-base, @shallow * 4),
+                      -@radius * 0.71 @radius * 0.71 0 lighten(@c-base, @shallow * 5),
+                      -@radius 0 0 lighten(@c-base, @shallow * 6),
+                      -@radius * 0.71 -@radius * 0.71 0 lighten(@c-base, @shallow * 7);
+        }
+      }
+    }
+  }
+
   .infinite-loading-container{
     clear: both;
     text-align: center;