New spinning effect for fa-spinner

src/_includes/examples/list.html

@@ -5,7 +5,7 @@
       <ul class="fa-ul">
         <li><i class="fa-li fa fa-check-square"></i>List icons</li>
         <li><i class="fa-li fa fa-check-square"></i>can be used</li>
-        <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
+        <li><i class="fa-li fa fa-spinner fa-spin2"></i>as bullets</li>
         <li><i class="fa-li fa fa-square"></i>in lists</li>
       </ul>
     </div>
@@ -15,7 +15,7 @@
 <ul class="fa-ul">
   <li><i class="fa-li fa fa-check-square"></i>List icons</li>
   <li><i class="fa-li fa fa-check-square"></i>can be used</li>
-  <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
+  <li><i class="fa-li fa fa-spinner fa-spin2"></i>as bullets</li>
   <li><i class="fa-li fa fa-square"></i>in lists</li>
 </ul>
 {% endhighlight %}

src/_includes/examples/spinning.html

@@ -3,7 +3,7 @@
   <div class="row">
     <div class="col-md-3 col-sm-4">
       <p>
-        <button class="btn btn-default btn-lg"><i class="fa fa-spinner fa-spin"></i></button>
+        <button class="btn btn-default btn-lg"><i class="fa fa-spinner fa-spin2"></i></button>
         <button class="btn btn-default btn-lg"><i class="fa fa-circle-o-notch fa-spin"></i></button>
         <button class="btn btn-default btn-lg"><i class="fa fa-refresh fa-spin"></i></button>
         <button class="btn btn-default btn-lg"><i class="fa fa-cog fa-spin"></i></button>
@@ -11,11 +11,11 @@
     </div>
     <div class="col-md-9 col-sm-8">
       <p>
-        Use the <code>fa-spin</code> class to get any icon to rotate. Works well with <code>fa-spinner</code>,
+        Use the <code>fa-spin</code> or <code>fa-spin2</code> class to get any icon to rotate. Works well with <code>fa-spinner</code>,
         <code>fa-refresh</code>, and <code>fa-cog</code>.
       </p>
 {% highlight html %}
-<i class="fa fa-spinner fa-spin"></i>
+<i class="fa fa-spinner fa-spin2"></i>
 <i class="fa fa-circle-o-notch fa-spin"></i>
 <i class="fa fa-refresh fa-spin"></i>
 <i class="fa fa-cog fa-spin"></i>

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);
+  }
+}

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);
+  }
+}