|
@@ -0,0 +1,52 @@
|
|
|
+@import 'nib'
|
|
|
+
|
|
|
+// From https://github.com/tobiasahlin/SpinKit
|
|
|
+.sk-spinner-cube {
|
|
|
+ margin: 100px auto;
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.sk-cube1, .sk-cube2 {
|
|
|
+ background-color: #333;
|
|
|
+ width: 15px;
|
|
|
+ height: 15px;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+
|
|
|
+ -webkit-animation: sk-cubemove 1.8s infinite ease-in-out;
|
|
|
+ animation: sk-cubemove 1.8s infinite ease-in-out;
|
|
|
+}
|
|
|
+
|
|
|
+.sk-cube2 {
|
|
|
+ -webkit-animation-delay: -0.9s;
|
|
|
+ animation-delay: -0.9s;
|
|
|
+}
|
|
|
+
|
|
|
+@-webkit-keyframes sk-cubemove {
|
|
|
+ 25% { -webkit-transform: translateX(35px) rotate(-90deg) scale(0.5) }
|
|
|
+ 50% { -webkit-transform: translateX(35px) translateY(35px) rotate(-180deg) }
|
|
|
+ 75% { -webkit-transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5) }
|
|
|
+ 100% { -webkit-transform: rotate(-360deg) }
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes sk-cubemove {
|
|
|
+ 25% {
|
|
|
+ transform: translateX(35px) rotate(-90deg) scale(0.5);
|
|
|
+ -webkit-transform: translateX(35px) rotate(-90deg) scale(0.5);
|
|
|
+ } 50% {
|
|
|
+ transform: translateX(35px) translateY(35px) rotate(-179deg);
|
|
|
+ -webkit-transform: translateX(35px) translateY(35px) rotate(-179deg);
|
|
|
+ } 50.1% {
|
|
|
+ transform: translateX(35px) translateY(35px) rotate(-180deg);
|
|
|
+ -webkit-transform: translateX(35px) translateY(35px) rotate(-180deg);
|
|
|
+ } 75% {
|
|
|
+ transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5);
|
|
|
+ -webkit-transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5);
|
|
|
+ } 100% {
|
|
|
+ transform: rotate(-360deg);
|
|
|
+ -webkit-transform: rotate(-360deg);
|
|
|
+ }
|
|
|
+}
|