- Use the fa-spin
class to get any icon to rotate. Works well with fa-spinner
,
+ Use the fa-spin
or fa-spin2
class to get any icon to rotate. Works well with fa-spinner
,
fa-refresh
, and fa-cog
.
{% highlight html %}
-
+
diff --git a/src/assets/font-awesome/less/spinning.less b/src/assets/font-awesome/less/spinning.less
index 682c54dd8..e9d9e960d 100644
--- a/src/assets/font-awesome/less/spinning.less
+++ b/src/assets/font-awesome/less/spinning.less
@@ -33,3 +33,83 @@
transform: rotate(359deg);
}
}
+
+
+.@{fa-css-prefix}-spin2 {
+ -webkit-animation: spin2 .8s infinite cubic-bezier(0,1,0,1);
+ -moz-animation: spin2 .8s infinite cubic-bezier(0,1,0,1);
+ -o-animation: spin2 .8s infinite cubic-bezier(0,1,0,1);
+ animation: spin2 .8s infinite cubic-bezier(0,1,0,1);
+}
+
+@-moz-keyframes spin2 {
+ 0% { -moz-transform: rotate(0deg); }
+ 12.5% { -moz-transform: rotate(45deg); }
+ 25% { -moz-transform: rotate(90deg); }
+ 37.5% { -moz-transform: rotate(135deg); }
+ 50% { -moz-transform: rotate(180deg); }
+ 62.5% { -moz-transform: rotate(225deg); }
+ 75% { -moz-transform: rotate(270deg); }
+ 87.5% { -moz-transform: rotate(315deg); }
+ 100% { -moz-transform: rotate(359deg); }
+}
+@-webkit-keyframes spin2 {
+ 0% { -webkit-transform: rotate(0deg); }
+ 12.5% { -webkit-transform: rotate(45deg); }
+ 25% { -webkit-transform: rotate(90deg); }
+ 37.5% { -webkit-transform: rotate(135deg); }
+ 50% { -webkit-transform: rotate(180deg); }
+ 62.5% { -webkit-transform: rotate(225deg); }
+ 75% { -webkit-transform: rotate(270deg); }
+ 87.5% { -webkit-transform: rotate(315deg); }
+ 100% { -webkit-transform: rotate(359deg); }
+}
+@-o-keyframes spin2 {
+ 0% { -o-transform: rotate(0deg); }
+ 12.5% { -o-transform: rotate(45deg); }
+ 25% { -o-transform: rotate(90deg); }
+ 37.5% { -o-transform: rotate(135deg); }
+ 50% { -o-transform: rotate(180deg); }
+ 62.5% { -o-transform: rotate(225deg); }
+ 75% { -o-transform: rotate(270deg); }
+ 87.5% { -o-transform: rotate(315deg); }
+ 100% { -o-transform: rotate(359deg); }
+}
+@keyframes spin2 {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+ 12.5% {
+ -webkit-transform: rotate(45deg);
+ transform: rotate(45deg);
+ }
+ 25% {
+ -webkit-transform: rotate(90deg);
+ transform: rotate(90deg);
+ }
+ 37.5% {
+ -webkit-transform: rotate(135deg);
+ transform: rotate(135deg);
+ }
+ 50% {
+ -webkit-transform: rotate(180deg);
+ transform: rotate(180deg);
+ }
+ 62.5% {
+ -webkit-transform: rotate(225deg);
+ transform: rotate(225deg);
+ }
+ 75% {
+ -webkit-transform: rotate(270deg);
+ transform: rotate(270deg);
+ }
+ 87.5% {
+ -webkit-transform: rotate(315deg);
+ transform: rotate(315deg);
+ }
+ 100% {
+ -webkit-transform: rotate(359deg);
+ transform: rotate(359deg);
+ }
+}
diff --git a/src/assets/font-awesome/scss/_spinning.scss b/src/assets/font-awesome/scss/_spinning.scss
index 5ebfea481..4a0d0df8c 100644
--- a/src/assets/font-awesome/scss/_spinning.scss
+++ b/src/assets/font-awesome/scss/_spinning.scss
@@ -33,3 +33,83 @@
transform: rotate(359deg);
}
}
+
+
+.#{$fa-css-prefix}-spin2 {
+ -webkit-animation: spin2 .8s infinite cubic-bezier(0,1,0,1);
+ -moz-animation: spin2 .8s infinite cubic-bezier(0,1,0,1);
+ -o-animation: spin2 .8s infinite cubic-bezier(0,1,0,1);
+ animation: spin2 .8s infinite cubic-bezier(0,1,0,1);
+}
+
+@-moz-keyframes spin2 {
+ 0% { -moz-transform: rotate(0deg); }
+ 12.5% { -moz-transform: rotate(45deg); }
+ 25% { -moz-transform: rotate(90deg); }
+ 37.5% { -moz-transform: rotate(135deg); }
+ 50% { -moz-transform: rotate(180deg); }
+ 62.5% { -moz-transform: rotate(225deg); }
+ 75% { -moz-transform: rotate(270deg); }
+ 87.5% { -moz-transform: rotate(315deg); }
+ 100% { -moz-transform: rotate(359deg); }
+}
+@-webkit-keyframes spin2 {
+ 0% { -webkit-transform: rotate(0deg); }
+ 12.5% { -webkit-transform: rotate(45deg); }
+ 25% { -webkit-transform: rotate(90deg); }
+ 37.5% { -webkit-transform: rotate(135deg); }
+ 50% { -webkit-transform: rotate(180deg); }
+ 62.5% { -webkit-transform: rotate(225deg); }
+ 75% { -webkit-transform: rotate(270deg); }
+ 87.5% { -webkit-transform: rotate(315deg); }
+ 100% { -webkit-transform: rotate(359deg); }
+}
+@-o-keyframes spin2 {
+ 0% { -o-transform: rotate(0deg); }
+ 12.5% { -o-transform: rotate(45deg); }
+ 25% { -o-transform: rotate(90deg); }
+ 37.5% { -o-transform: rotate(135deg); }
+ 50% { -o-transform: rotate(180deg); }
+ 62.5% { -o-transform: rotate(225deg); }
+ 75% { -o-transform: rotate(270deg); }
+ 87.5% { -o-transform: rotate(315deg); }
+ 100% { -o-transform: rotate(359deg); }
+}
+@keyframes spin2 {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+ 12.5% {
+ -webkit-transform: rotate(45deg);
+ transform: rotate(45deg);
+ }
+ 25% {
+ -webkit-transform: rotate(90deg);
+ transform: rotate(90deg);
+ }
+ 37.5% {
+ -webkit-transform: rotate(135deg);
+ transform: rotate(135deg);
+ }
+ 50% {
+ -webkit-transform: rotate(180deg);
+ transform: rotate(180deg);
+ }
+ 62.5% {
+ -webkit-transform: rotate(225deg);
+ transform: rotate(225deg);
+ }
+ 75% {
+ -webkit-transform: rotate(270deg);
+ transform: rotate(270deg);
+ }
+ 87.5% {
+ -webkit-transform: rotate(315deg);
+ transform: rotate(315deg);
+ }
+ 100% {
+ -webkit-transform: rotate(359deg);
+ transform: rotate(359deg);
+ }
+}
\ No newline at end of file