init crater

resources/assets/sass/components/base/base-loader/animation/_functions.scss

@@ -0,0 +1,3 @@
+@function delay($interval, $count, $index) {
+  @return ($index * $interval) - ($interval * $count);
+}

resources/assets/sass/components/base/base-loader/animation/_mixins.scss

@@ -0,0 +1,25 @@
+@mixin global-bg() {
+  background-color: $primary-color;
+}
+
+@mixin global-animation() {
+  animation-fill-mode: both;
+}
+
+@mixin balls() {
+  @include global-bg();
+
+  width: $ball-size;
+  height: $ball-size;
+  border-radius: 100%;
+  margin: $margin;
+}
+
+@mixin lines() {
+  @include global-bg();
+
+  width: $line-width;
+  height: $line-height;
+  border-radius: 2px;
+  margin: $margin;
+}

resources/assets/sass/components/base/base-loader/animation/_variables.scss

@@ -0,0 +1,6 @@
+$primary-color: $crater-theme--light !default;
+$ball-size: 15px !default;
+$margin: 2px !default;
+$line-height: 35px !default;
+$line-width: 4px !default;
+

resources/assets/sass/components/base/base-loader/index.scss

@@ -0,0 +1,58 @@
+@import './animation/variables';
+@import './animation/mixins';
+@import './animation/functions';
+
+$size: 50px;
+
+@keyframes ball-scale-ripple-multiple {
+  0% {
+    transform: scale(0.1);
+    opacity: 1;
+  }
+  70% {
+    transform: scale(1);
+    opacity: 0.7;
+  }
+  100% {
+    opacity: 0.0;
+  }
+}
+
+@mixin ball-scale-ripple-multiple ($n:3, $start:0) {
+  @for $i from $start through $n {
+    > div:nth-child(#{$i}) {
+      animation-delay: delay(0.2s, $n, $i - 1);
+    }
+  }
+}
+
+.loader {
+    width: 100%;
+    position: relative;
+    min-height: 500px;
+}
+
+.ball-scale-ripple-multiple {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    transform: translateY(-25px);
+    top: 60%;
+    left: 40%;
+    @include ball-scale-ripple-multiple();
+    transform: translateY(-$size / 2);
+
+    > div {
+        @include global-animation();
+
+        position: absolute;
+        top: -2px;
+        left: -26px;
+        width: $size;
+        height: $size;
+        border-radius: 100%;
+        border: 2px solid $primary-color;
+        animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(.21,.53,.56,.8);
+    }
+}