add styling for spinner

Author: danielstgt

components/spinner/Spinner.vue

@@ -2,10 +2,10 @@
     <div>
         <transition name="fade" enter-active-class="duration-0-4 animated fadeIn" leave-active-class="duration-0-4 animated fadeOut">
             <div class="text-center text-grey">
-                <div class="pa-spinner inline-flex">
-                    <div class="pa-spinner-circle1"></div>
-                    <div class="pa-spinner-circle2 ml-1"></div>
-                    <div class="pa-spinner-circle3 ml-1"></div>
+                <div class="vb-spinner inline-flex">
+                    <div class="vb-spinner-circle1"></div>
+                    <div class="vb-spinner-circle2 ml-1"></div>
+                    <div class="vb-spinner-circle3 ml-1"></div>
                 </div>
 
                 <p>{{ loadingText }}</p>
@@ -20,4 +20,29 @@ export default {
 }
 </script>
 
-<style></style>
+<style>
+.vb-spinner > div {
+    width: 18px;
+    height: 18px;
+    @apply .bg-green .rounded-full;
+    animation: spinner-bounce-delay 1.4s infinite ease-in-out both, color-animation 2.8s infinite ease-in-out both;
+}
+
+.vb-spinner .vb-spinner-circle1 {
+    animation-delay: -0.32s;
+}
+
+.vb-spinner .vb-spinner-circle2 {
+    animation-delay: -0.16s;
+}
+
+@keyframes spinner-bounce-delay {
+    0%, 80%, 100% {
+        transform: scale(0.3);
+    }
+
+    40% {
+        transform: scale(1.0);
+    }
+}
+</style>