diff --git a/src/_includes/examples/list.html b/src/_includes/examples/list.html index 880015ab0..c91a9221e 100644 --- a/src/_includes/examples/list.html +++ b/src/_includes/examples/list.html @@ -5,7 +5,7 @@ @@ -15,7 +15,7 @@ {% endhighlight %} diff --git a/src/_includes/examples/spinning.html b/src/_includes/examples/spinning.html index 7f1dfd03b..7c28f07a9 100644 --- a/src/_includes/examples/spinning.html +++ b/src/_includes/examples/spinning.html @@ -3,7 +3,7 @@

- + @@ -11,11 +11,11 @@

- 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