tplus-components-touch 3.41.13 → 3.41.14

package/dist/components/spin/spin-style.less

@@ -1,436 +1,436 @@
-.tplus-spin {
-  .arrow-circle {
-    position: relative;
-    width: 25px;
-    height: 25px;
-    -webkit-animation: arrow-circle infinite .75s linear;
-    -moz-animation: arrow-circle infinite .75s linear;
-    -o-animation: arrow-circle infinite .75s linear;
-    animation: arrow-circle infinite .75s linear;
-    border: 2px solid #fff;
-    border-top-color: transparent;
-    border-bottom-color: transparent;
-    border-radius: 100%;
-  }
-  .arrow-circle:before, .arrow-circle:after {
-    position: absolute;
-    top: 19px;
-    left: -3px;
-    content: '';
-    -webkit-transform: rotate(-30deg);
-    -ms-transform: rotate(-30deg);
-    -o-transform: rotate(-30deg);
-    transform: rotate(-30deg);
-    border-top: 5px solid #fff;
-    border-right: 5px solid transparent;
-    border-left: 5px solid transparent;
-  }
-  .arrow-circle:after {
-    top: 0;
-    left: 17px;
-    -webkit-transform: rotate(150deg);
-    -ms-transform: rotate(150deg);
-    -o-transform: rotate(150deg);
-    transform: rotate(150deg);
-  }
-
-  @keyframes arrow-circle {
-    0% {
-      -webkit-transform: rotate(360deg);
-      -ms-transform: rotate(360deg);
-      -o-transform: rotate(360deg);
-      transform: rotate(360deg);
-    }
-    100% {
-      -webkit-transform: rotate(0);
-      -ms-transform: rotate(0);
-      -o-transform: rotate(0);
-      transform: rotate(0);
-    }
-  }
-
-  //circle spin
-
-  .circle {
-    width: 25px;
-    height: 25px;
-    -webkit-animation: circle infinite .75s linear;
-    -moz-animation: circle infinite .75s linear;
-    -o-animation: circle infinite .75s linear;
-    animation: circle infinite .75s linear;
-    border: 2px solid #fff;
-    border-top-color: transparent;
-    border-radius: 100%;
-  }
-
-  //circle-side spin
-  .circle-side {
-    position: relative;
-    width: 25px;
-    height: 25px;
-    -webkit-animation: circle infinite .75s linear;
-    -moz-animation: circle infinite .75s linear;
-    -o-animation: circle infinite .75s linear;
-    animation: circle infinite .75s linear;
-    border: 2px solid #fff;
-    border-top-color: rgba(0, 0, 0, .2);
-    border-right-color: rgba(0, 0, 0, .2);
-    border-bottom-color: rgba(0, 0, 0, .2);
-    border-radius: 100%;
-  }
-
-  @-webkit-keyframes circle {
-    0% {
-      -webkit-transform: rotate(0);
-      -ms-transform: rotate(0);
-      -o-transform: rotate(0);
-      transform: rotate(0);
-    }
-    100% {
-      -webkit-transform: rotate(360deg);
-      -ms-transform: rotate(360deg);
-      -o-transform: rotate(360deg);
-      transform: rotate(360deg);
-    }
-  }
-
-  // shape
-  .shape-container {
-    position: relative;
-    width: 30px;
-    height: 30px;
-    -webkit-transform: rotate(45deg);
-    transform: rotate(45deg);
-    .shape{
-      position: absolute;
-      width: 15px;
-      height: 15px;
-      &.shape-1 {
-        left: 0;
-        background-color: #4285F4;
-      }
-      &.shape-2 {
-        right: 0;
-        background-color: #34A853;
-      }
-      &.shape-3 {
-        bottom: 0;
-        background-color: #FBBC05;
-      }
-      &.shape-4 {
-        bottom: 0;
-        right: 0;
-        background-color: #EA4335;
-      }
-    }
-    .shape-1 {
-      animation: shape1 2s infinite reverse;
-    }
-    .shape-2 {
-      animation: shape2 2s infinite reverse;
-    }
-    .shape-3 {
-      animation: shape3 2s infinite reverse;
-    }
-    .shape-4 {
-      animation: shape4 2s infinite reverse;
-    }
-  }
-
-  @keyframes shape1 {
-    0% {
-      -webkit-transform: translate(0, 0);
-      transform: translate(0, 0);
-    }
-    25% {
-      -webkit-transform: translate(0, 15px);
-      transform: translate(0, 15px);
-    }
-    50% {
-      -webkit-transform: translate(15px, 15px);
-      transform: translate(15px, 15px);
-    }
-    75% {
-      -webkit-transform: translate(15px, 0);
-      transform: translate(15px, 0);
-    }
-  }
-  @keyframes shape2 {
-    0% {
-      -webkit-transform: translate(0, 0);
-      transform: translate(0, 0);
-    }
-    25% {
-      -webkit-transform: translate(-15px, 0);
-      transform: translate(-15px, 0);
-    }
-    50% {
-      -webkit-transform: translate(-15px, 15px);
-      transform: translate(-15px, 15px);
-    }
-    75% {
-      -webkit-transform: translate(0, 15px);
-      transform: translate(0, 15px);
-    }
-  }
-  @keyframes shape3 {
-    0% {
-      -webkit-transform: translate(0, 0);
-      transform: translate(0, 0);
-    }
-    25% {
-      -webkit-transform: translate(15px, 0);
-      transform: translate(15px, 0);
-    }
-    50% {
-      -webkit-transform: translate(15px, -15px);
-      transform: translate(15px, -15px);
-    }
-    75% {
-      -webkit-transform: translate(0, -15px);
-      transform: translate(0, -15px);
-    }
-  }
-  @keyframes shape4 {
-    0% {
-      -webkit-transform: translate(0, 0);
-      transform: translate(0, 0);
-    }
-    25% {
-      -webkit-transform: translate(0, -15px);
-      transform: translate(0, -15px);
-    }
-    50% {
-      -webkit-transform: translate(-15px, -15px);
-      transform: translate(-15px, -15px);
-    }
-    75% {
-      -webkit-transform: translate(-15px, 0);
-      transform: translate(-15px, 0);
-    }
-  }
-}
-
-/*!
- * Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/)
- * Copyright 2015 Daniel Cardoso <@DanielCardoso>
- * Licensed under MIT
- */
-.la-ball-spin-clockwise-fade-rotating,
-.la-ball-spin-clockwise-fade-rotating > div {
-  position: relative;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-.la-ball-spin-clockwise-fade-rotating {
-  display: block;
-  font-size: 0;
-  color: #fff;
-}
-.la-ball-spin-clockwise-fade-rotating.la-dark {
-  color: #333;
-}
-.la-ball-spin-clockwise-fade-rotating > div {
-  display: inline-block;
-  float: none;
-  background-color: currentColor;
-  border: 0 solid currentColor;
-}
-.la-ball-spin-clockwise-fade-rotating {
-  width: 32px;
-  height: 32px;
-  -webkit-animation: ball-spin-clockwise-fade-rotating-rotate 6s infinite linear;
-  -moz-animation: ball-spin-clockwise-fade-rotating-rotate 6s infinite linear;
-  -o-animation: ball-spin-clockwise-fade-rotating-rotate 6s infinite linear;
-  animation: ball-spin-clockwise-fade-rotating-rotate 6s infinite linear;
-}
-.la-ball-spin-clockwise-fade-rotating > div {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 8px;
-  height: 8px;
-  margin-top: -4px;
-  margin-left: -4px;
-  border-radius: 100%;
-  -webkit-animation: ball-spin-clockwise-fade-rotating 1s infinite linear;
-  -moz-animation: ball-spin-clockwise-fade-rotating 1s infinite linear;
-  -o-animation: ball-spin-clockwise-fade-rotating 1s infinite linear;
-  animation: ball-spin-clockwise-fade-rotating 1s infinite linear;
-}
-.la-ball-spin-clockwise-fade-rotating > div:nth-child(1) {
-  top: 5%;
-  left: 50%;
-  -webkit-animation-delay: -.875s;
-  -moz-animation-delay: -.875s;
-  -o-animation-delay: -.875s;
-  animation-delay: -.875s;
-}
-.la-ball-spin-clockwise-fade-rotating > div:nth-child(2) {
-  top: 18.1801948466%;
-  left: 81.8198051534%;
-  -webkit-animation-delay: -.75s;
-  -moz-animation-delay: -.75s;
-  -o-animation-delay: -.75s;
-  animation-delay: -.75s;
-}
-.la-ball-spin-clockwise-fade-rotating > div:nth-child(3) {
-  top: 50%;
-  left: 95%;
-  -webkit-animation-delay: -.625s;
-  -moz-animation-delay: -.625s;
-  -o-animation-delay: -.625s;
-  animation-delay: -.625s;
-}
-.la-ball-spin-clockwise-fade-rotating > div:nth-child(4) {
-  top: 81.8198051534%;
-  left: 81.8198051534%;
-  -webkit-animation-delay: -.5s;
-  -moz-animation-delay: -.5s;
-  -o-animation-delay: -.5s;
-  animation-delay: -.5s;
-}
-.la-ball-spin-clockwise-fade-rotating > div:nth-child(5) {
-  top: 94.9999999966%;
-  left: 50.0000000005%;
-  -webkit-animation-delay: -.375s;
-  -moz-animation-delay: -.375s;
-  -o-animation-delay: -.375s;
-  animation-delay: -.375s;
-}
-.la-ball-spin-clockwise-fade-rotating > div:nth-child(6) {
-  top: 81.8198046966%;
-  left: 18.1801949248%;
-  -webkit-animation-delay: -.25s;
-  -moz-animation-delay: -.25s;
-  -o-animation-delay: -.25s;
-  animation-delay: -.25s;
-}
-.la-ball-spin-clockwise-fade-rotating > div:nth-child(7) {
-  top: 49.9999750815%;
-  left: 5.0000051215%;
-  -webkit-animation-delay: -.125s;
-  -moz-animation-delay: -.125s;
-  -o-animation-delay: -.125s;
-  animation-delay: -.125s;
-}
-.la-ball-spin-clockwise-fade-rotating > div:nth-child(8) {
-  top: 18.179464974%;
-  left: 18.1803700518%;
-  -webkit-animation-delay: 0s;
-  -moz-animation-delay: 0s;
-  -o-animation-delay: 0s;
-  animation-delay: 0s;
-}
-.la-ball-spin-clockwise-fade-rotating.la-sm {
-  width: 16px;
-  height: 16px;
-}
-.la-ball-spin-clockwise-fade-rotating.la-sm > div {
-  width: 4px;
-  height: 4px;
-  margin-top: -2px;
-  margin-left: -2px;
-}
-.la-ball-spin-clockwise-fade-rotating.la-2x {
-  width: 64px;
-  height: 64px;
-}
-.la-ball-spin-clockwise-fade-rotating.la-2x > div {
-  width: 16px;
-  height: 16px;
-  margin-top: -8px;
-  margin-left: -8px;
-}
-.la-ball-spin-clockwise-fade-rotating.la-3x {
-  width: 96px;
-  height: 96px;
-}
-.la-ball-spin-clockwise-fade-rotating.la-3x > div {
-  width: 24px;
-  height: 24px;
-  margin-top: -12px;
-  margin-left: -12px;
-}
-/*
- * Animations
- */
-@-webkit-keyframes ball-spin-clockwise-fade-rotating-rotate {
-  100% {
-    -webkit-transform: rotate(-360deg);
-    transform: rotate(-360deg);
-  }
-}
-@-moz-keyframes ball-spin-clockwise-fade-rotating-rotate {
-  100% {
-    -moz-transform: rotate(-360deg);
-    transform: rotate(-360deg);
-  }
-}
-@-o-keyframes ball-spin-clockwise-fade-rotating-rotate {
-  100% {
-    -o-transform: rotate(-360deg);
-    transform: rotate(-360deg);
-  }
-}
-@keyframes ball-spin-clockwise-fade-rotating-rotate {
-  100% {
-    -webkit-transform: rotate(-360deg);
-    -moz-transform: rotate(-360deg);
-    -o-transform: rotate(-360deg);
-    transform: rotate(-360deg);
-  }
-}
-@-webkit-keyframes ball-spin-clockwise-fade-rotating {
-  50% {
-    opacity: .25;
-    -webkit-transform: scale(.5);
-    transform: scale(.5);
-  }
-  100% {
-    opacity: 1;
-    -webkit-transform: scale(1);
-    transform: scale(1);
-  }
-}
-@-moz-keyframes ball-spin-clockwise-fade-rotating {
-  50% {
-    opacity: .25;
-    -moz-transform: scale(.5);
-    transform: scale(.5);
-  }
-  100% {
-    opacity: 1;
-    -moz-transform: scale(1);
-    transform: scale(1);
-  }
-}
-@-o-keyframes ball-spin-clockwise-fade-rotating {
-  50% {
-    opacity: .25;
-    -o-transform: scale(.5);
-    transform: scale(.5);
-  }
-  100% {
-    opacity: 1;
-    -o-transform: scale(1);
-    transform: scale(1);
-  }
-}
-@keyframes ball-spin-clockwise-fade-rotating {
-  50% {
-    opacity: .25;
-    -webkit-transform: scale(.5);
-    -moz-transform: scale(.5);
-    -o-transform: scale(.5);
-    transform: scale(.5);
-  }
-  100% {
-    opacity: 1;
-    -webkit-transform: scale(1);
-    -moz-transform: scale(1);
-    -o-transform: scale(1);
-    transform: scale(1);
-  }
-}
+.tplus-spin {
+  .arrow-circle {
+    position: relative;
+    width: 25px;
+    height: 25px;
+    -webkit-animation: arrow-circle infinite .75s linear;
+    -moz-animation: arrow-circle infinite .75s linear;
+    -o-animation: arrow-circle infinite .75s linear;
+    animation: arrow-circle infinite .75s linear;
+    border: 2px solid #fff;
+    border-top-color: transparent;
+    border-bottom-color: transparent;
+    border-radius: 100%;
+  }
+  .arrow-circle:before, .arrow-circle:after {
+    position: absolute;
+    top: 19px;
+    left: -3px;
+    content: '';
+    -webkit-transform: rotate(-30deg);
+    -ms-transform: rotate(-30deg);
+    -o-transform: rotate(-30deg);
+    transform: rotate(-30deg);
+    border-top: 5px solid #fff;
+    border-right: 5px solid transparent;
+    border-left: 5px solid transparent;
+  }
+  .arrow-circle:after {
+    top: 0;
+    left: 17px;
+    -webkit-transform: rotate(150deg);
+    -ms-transform: rotate(150deg);
+    -o-transform: rotate(150deg);
+    transform: rotate(150deg);
+  }
+
+  @keyframes arrow-circle {
+    0% {
+      -webkit-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+    100% {
+      -webkit-transform: rotate(0);
+      -ms-transform: rotate(0);
+      -o-transform: rotate(0);
+      transform: rotate(0);
+    }
+  }
+
+  //circle spin
+
+  .circle {
+    width: 25px;
+    height: 25px;
+    -webkit-animation: circle infinite .75s linear;
+    -moz-animation: circle infinite .75s linear;
+    -o-animation: circle infinite .75s linear;
+    animation: circle infinite .75s linear;
+    border: 2px solid #fff;
+    border-top-color: transparent;
+    border-radius: 100%;
+  }
+
+  //circle-side spin
+  .circle-side {
+    position: relative;
+    width: 25px;
+    height: 25px;
+    -webkit-animation: circle infinite .75s linear;
+    -moz-animation: circle infinite .75s linear;
+    -o-animation: circle infinite .75s linear;
+    animation: circle infinite .75s linear;
+    border: 2px solid #fff;
+    border-top-color: rgba(0, 0, 0, .2);
+    border-right-color: rgba(0, 0, 0, .2);
+    border-bottom-color: rgba(0, 0, 0, .2);
+    border-radius: 100%;
+  }
+
+  @-webkit-keyframes circle {
+    0% {
+      -webkit-transform: rotate(0);
+      -ms-transform: rotate(0);
+      -o-transform: rotate(0);
+      transform: rotate(0);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+
+  // shape
+  .shape-container {
+    position: relative;
+    width: 30px;
+    height: 30px;
+    -webkit-transform: rotate(45deg);
+    transform: rotate(45deg);
+    .shape{
+      position: absolute;
+      width: 15px;
+      height: 15px;
+      &.shape-1 {
+        left: 0;
+        background-color: #4285F4;
+      }
+      &.shape-2 {
+        right: 0;
+        background-color: #34A853;
+      }
+      &.shape-3 {
+        bottom: 0;
+        background-color: #FBBC05;
+      }
+      &.shape-4 {
+        bottom: 0;
+        right: 0;
+        background-color: #EA4335;
+      }
+    }
+    .shape-1 {
+      animation: shape1 2s infinite reverse;
+    }
+    .shape-2 {
+      animation: shape2 2s infinite reverse;
+    }
+    .shape-3 {
+      animation: shape3 2s infinite reverse;
+    }
+    .shape-4 {
+      animation: shape4 2s infinite reverse;
+    }
+  }
+
+  @keyframes shape1 {
+    0% {
+      -webkit-transform: translate(0, 0);
+      transform: translate(0, 0);
+    }
+    25% {
+      -webkit-transform: translate(0, 15px);
+      transform: translate(0, 15px);
+    }
+    50% {
+      -webkit-transform: translate(15px, 15px);
+      transform: translate(15px, 15px);
+    }
+    75% {
+      -webkit-transform: translate(15px, 0);
+      transform: translate(15px, 0);
+    }
+  }
+  @keyframes shape2 {
+    0% {
+      -webkit-transform: translate(0, 0);
+      transform: translate(0, 0);
+    }
+    25% {
+      -webkit-transform: translate(-15px, 0);
+      transform: translate(-15px, 0);
+    }
+    50% {
+      -webkit-transform: translate(-15px, 15px);
+      transform: translate(-15px, 15px);
+    }
+    75% {
+      -webkit-transform: translate(0, 15px);
+      transform: translate(0, 15px);
+    }
+  }
+  @keyframes shape3 {
+    0% {
+      -webkit-transform: translate(0, 0);
+      transform: translate(0, 0);
+    }
+    25% {
+      -webkit-transform: translate(15px, 0);
+      transform: translate(15px, 0);
+    }
+    50% {
+      -webkit-transform: translate(15px, -15px);
+      transform: translate(15px, -15px);
+    }
+    75% {
+      -webkit-transform: translate(0, -15px);
+      transform: translate(0, -15px);
+    }
+  }
+  @keyframes shape4 {
+    0% {
+      -webkit-transform: translate(0, 0);
+      transform: translate(0, 0);
+    }
+    25% {
+      -webkit-transform: translate(0, -15px);
+      transform: translate(0, -15px);
+    }
+    50% {
+      -webkit-transform: translate(-15px, -15px);
+      transform: translate(-15px, -15px);
+    }
+    75% {
+      -webkit-transform: translate(-15px, 0);
+      transform: translate(-15px, 0);
+    }
+  }
+}
+
+/*!
+ * Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/)
+ * Copyright 2015 Daniel Cardoso <@DanielCardoso>
+ * Licensed under MIT
+ */
+.la-ball-spin-clockwise-fade-rotating,
+.la-ball-spin-clockwise-fade-rotating > div {
+  position: relative;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.la-ball-spin-clockwise-fade-rotating {
+  display: block;
+  font-size: 0;
+  color: #fff;
+}
+.la-ball-spin-clockwise-fade-rotating.la-dark {
+  color: #333;
+}
+.la-ball-spin-clockwise-fade-rotating > div {
+  display: inline-block;
+  float: none;
+  background-color: currentColor;
+  border: 0 solid currentColor;
+}
+.la-ball-spin-clockwise-fade-rotating {
+  width: 32px;
+  height: 32px;
+  -webkit-animation: ball-spin-clockwise-fade-rotating-rotate 6s infinite linear;
+  -moz-animation: ball-spin-clockwise-fade-rotating-rotate 6s infinite linear;
+  -o-animation: ball-spin-clockwise-fade-rotating-rotate 6s infinite linear;
+  animation: ball-spin-clockwise-fade-rotating-rotate 6s infinite linear;
+}
+.la-ball-spin-clockwise-fade-rotating > div {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 8px;
+  height: 8px;
+  margin-top: -4px;
+  margin-left: -4px;
+  border-radius: 100%;
+  -webkit-animation: ball-spin-clockwise-fade-rotating 1s infinite linear;
+  -moz-animation: ball-spin-clockwise-fade-rotating 1s infinite linear;
+  -o-animation: ball-spin-clockwise-fade-rotating 1s infinite linear;
+  animation: ball-spin-clockwise-fade-rotating 1s infinite linear;
+}
+.la-ball-spin-clockwise-fade-rotating > div:nth-child(1) {
+  top: 5%;
+  left: 50%;
+  -webkit-animation-delay: -.875s;
+  -moz-animation-delay: -.875s;
+  -o-animation-delay: -.875s;
+  animation-delay: -.875s;
+}
+.la-ball-spin-clockwise-fade-rotating > div:nth-child(2) {
+  top: 18.1801948466%;
+  left: 81.8198051534%;
+  -webkit-animation-delay: -.75s;
+  -moz-animation-delay: -.75s;
+  -o-animation-delay: -.75s;
+  animation-delay: -.75s;
+}
+.la-ball-spin-clockwise-fade-rotating > div:nth-child(3) {
+  top: 50%;
+  left: 95%;
+  -webkit-animation-delay: -.625s;
+  -moz-animation-delay: -.625s;
+  -o-animation-delay: -.625s;
+  animation-delay: -.625s;
+}
+.la-ball-spin-clockwise-fade-rotating > div:nth-child(4) {
+  top: 81.8198051534%;
+  left: 81.8198051534%;
+  -webkit-animation-delay: -.5s;
+  -moz-animation-delay: -.5s;
+  -o-animation-delay: -.5s;
+  animation-delay: -.5s;
+}
+.la-ball-spin-clockwise-fade-rotating > div:nth-child(5) {
+  top: 94.9999999966%;
+  left: 50.0000000005%;
+  -webkit-animation-delay: -.375s;
+  -moz-animation-delay: -.375s;
+  -o-animation-delay: -.375s;
+  animation-delay: -.375s;
+}
+.la-ball-spin-clockwise-fade-rotating > div:nth-child(6) {
+  top: 81.8198046966%;
+  left: 18.1801949248%;
+  -webkit-animation-delay: -.25s;
+  -moz-animation-delay: -.25s;
+  -o-animation-delay: -.25s;
+  animation-delay: -.25s;
+}
+.la-ball-spin-clockwise-fade-rotating > div:nth-child(7) {
+  top: 49.9999750815%;
+  left: 5.0000051215%;
+  -webkit-animation-delay: -.125s;
+  -moz-animation-delay: -.125s;
+  -o-animation-delay: -.125s;
+  animation-delay: -.125s;
+}
+.la-ball-spin-clockwise-fade-rotating > div:nth-child(8) {
+  top: 18.179464974%;
+  left: 18.1803700518%;
+  -webkit-animation-delay: 0s;
+  -moz-animation-delay: 0s;
+  -o-animation-delay: 0s;
+  animation-delay: 0s;
+}
+.la-ball-spin-clockwise-fade-rotating.la-sm {
+  width: 16px;
+  height: 16px;
+}
+.la-ball-spin-clockwise-fade-rotating.la-sm > div {
+  width: 4px;
+  height: 4px;
+  margin-top: -2px;
+  margin-left: -2px;
+}
+.la-ball-spin-clockwise-fade-rotating.la-2x {
+  width: 64px;
+  height: 64px;
+}
+.la-ball-spin-clockwise-fade-rotating.la-2x > div {
+  width: 16px;
+  height: 16px;
+  margin-top: -8px;
+  margin-left: -8px;
+}
+.la-ball-spin-clockwise-fade-rotating.la-3x {
+  width: 96px;
+  height: 96px;
+}
+.la-ball-spin-clockwise-fade-rotating.la-3x > div {
+  width: 24px;
+  height: 24px;
+  margin-top: -12px;
+  margin-left: -12px;
+}
+/*
+ * Animations
+ */
+@-webkit-keyframes ball-spin-clockwise-fade-rotating-rotate {
+  100% {
+    -webkit-transform: rotate(-360deg);
+    transform: rotate(-360deg);
+  }
+}
+@-moz-keyframes ball-spin-clockwise-fade-rotating-rotate {
+  100% {
+    -moz-transform: rotate(-360deg);
+    transform: rotate(-360deg);
+  }
+}
+@-o-keyframes ball-spin-clockwise-fade-rotating-rotate {
+  100% {
+    -o-transform: rotate(-360deg);
+    transform: rotate(-360deg);
+  }
+}
+@keyframes ball-spin-clockwise-fade-rotating-rotate {
+  100% {
+    -webkit-transform: rotate(-360deg);
+    -moz-transform: rotate(-360deg);
+    -o-transform: rotate(-360deg);
+    transform: rotate(-360deg);
+  }
+}
+@-webkit-keyframes ball-spin-clockwise-fade-rotating {
+  50% {
+    opacity: .25;
+    -webkit-transform: scale(.5);
+    transform: scale(.5);
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+@-moz-keyframes ball-spin-clockwise-fade-rotating {
+  50% {
+    opacity: .25;
+    -moz-transform: scale(.5);
+    transform: scale(.5);
+  }
+  100% {
+    opacity: 1;
+    -moz-transform: scale(1);
+    transform: scale(1);
+  }
+}
+@-o-keyframes ball-spin-clockwise-fade-rotating {
+  50% {
+    opacity: .25;
+    -o-transform: scale(.5);
+    transform: scale(.5);
+  }
+  100% {
+    opacity: 1;
+    -o-transform: scale(1);
+    transform: scale(1);
+  }
+}
+@keyframes ball-spin-clockwise-fade-rotating {
+  50% {
+    opacity: .25;
+    -webkit-transform: scale(.5);
+    -moz-transform: scale(.5);
+    -o-transform: scale(.5);
+    transform: scale(.5);
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1);
+  }
+}