Initial Commit

stickerpicker/style/spinner.sass

@@ -0,0 +1,68 @@
+// Chase spinner from https://tobiasahlin.com/spinkit/. MIT license
+.sk-center-wrapper
+  width: 100%
+  display: flex
+  justify-content: space-around
+
+.sk-chase
+  position: relative
+  animation: sk-chase 2.5s infinite linear both
+
+  &.green > .sk-chase-dot:before
+    background-color: #00C853
+
+  > .sk-chase-dot
+    width: 100%
+    height: 100%
+    position: absolute
+    left: 0
+    top: 0
+    animation: sk-chase-dot 2.0s infinite ease-in-out both
+
+    &:before
+      content: ''
+      display: block
+      width: 25%
+      height: 25%
+      border-radius: 100%
+      animation: sk-chase-dot-before 2.0s infinite ease-in-out both
+      background-color: #FFF
+
+    &:nth-child(1)
+      animation-delay: -1.1s
+    &:nth-child(2)
+      animation-delay: -1.0s
+    &:nth-child(3)
+      animation-delay: -0.9s
+    &:nth-child(4)
+      animation-delay: -0.8s
+    &:nth-child(5)
+      animation-delay: -0.7s
+    &:nth-child(6)
+      animation-delay: -0.6s
+    &:nth-child(1):before
+      animation-delay: -1.1s
+    &:nth-child(2):before
+      animation-delay: -1.0s
+    &:nth-child(3):before
+      animation-delay: -0.9s
+    &:nth-child(4):before
+      animation-delay: -0.8s
+    &:nth-child(5):before
+      animation-delay: -0.7s
+    &:nth-child(6):before
+      animation-delay: -0.6s
+
+@keyframes sk-chase
+  100%
+    transform: rotate(360deg)
+
+@keyframes sk-chase-dot
+  80%, 100%
+    transform: rotate(360deg)
+
+@keyframes sk-chase-dot-before
+  50%
+    transform: scale(0.4)
+  100%, 0%
+    transform: scale(1.0)