mirror of
https://github.com/FortAwesome/Font-Awesome.git
synced 2025-01-15 17:50:28 +08:00
Feature: jumping animation for .fa-spinner.fa-spin
This commit is contained in:
Paul Spieker
parent
de0d319f98
commit
dc105fa6f1
102
css/font-awesome.css
vendored
102
css/font-awesome.css
vendored
@ -21,7 +21,7 @@
|
|||||||
}
|
}
|
||||||
/* makes the font 33% larger relative to the icon container */
|
/* makes the font 33% larger relative to the icon container */
|
||||||
.fa-lg {
|
.fa-lg {
|
||||||
font-size: 1.33333333em;
|
font-size: 1.3333333333333333em;
|
||||||
line-height: 0.75em;
|
line-height: 0.75em;
|
||||||
vertical-align: -15%;
|
vertical-align: -15%;
|
||||||
}
|
}
|
||||||
@ -38,12 +38,12 @@
|
|||||||
font-size: 5em;
|
font-size: 5em;
|
||||||
}
|
}
|
||||||
.fa-fw {
|
.fa-fw {
|
||||||
width: 1.28571429em;
|
width: 1.2857142857142858em;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.fa-ul {
|
.fa-ul {
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
margin-left: 2.14285714em;
|
margin-left: 2.142857142857143em;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
}
|
}
|
||||||
.fa-ul > li {
|
.fa-ul > li {
|
||||||
@ -51,13 +51,13 @@
|
|||||||
}
|
}
|
||||||
.fa-li {
|
.fa-li {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: -2.14285714em;
|
left: -2.142857142857143em;
|
||||||
width: 2.14285714em;
|
width: 2.142857142857143em;
|
||||||
top: 0.14285714em;
|
top: 0.14285714285714285em;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.fa-li.fa-lg {
|
.fa-li.fa-lg {
|
||||||
left: -1.85714286em;
|
left: -1.8571428571428572em;
|
||||||
}
|
}
|
||||||
.fa-border {
|
.fa-border {
|
||||||
padding: .2em .25em .15em;
|
padding: .2em .25em .15em;
|
||||||
@ -80,6 +80,10 @@
|
|||||||
-webkit-animation: fa-spin 2s infinite linear;
|
-webkit-animation: fa-spin 2s infinite linear;
|
||||||
animation: fa-spin 2s infinite linear;
|
animation: fa-spin 2s infinite linear;
|
||||||
}
|
}
|
||||||
|
.fa-spin.fa-spinner {
|
||||||
|
-webkit-animation: fa-spin-fa-spinner 0.8s infinite linear;
|
||||||
|
animation: fa-spin-fa-spinner 0.8s infinite linear;
|
||||||
|
}
|
||||||
@-webkit-keyframes fa-spin {
|
@-webkit-keyframes fa-spin {
|
||||||
0% {
|
0% {
|
||||||
-webkit-transform: rotate(0deg);
|
-webkit-transform: rotate(0deg);
|
||||||
@ -100,6 +104,90 @@
|
|||||||
transform: rotate(359deg);
|
transform: rotate(359deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@-webkit-keyframes fa-spin-fa-spinner {
|
||||||
|
0%,
|
||||||
|
12.499% {
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
12.5%,
|
||||||
|
24.999% {
|
||||||
|
-webkit-transform: rotate(45deg);
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
25%,
|
||||||
|
37.499% {
|
||||||
|
-webkit-transform: rotate(90deg);
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
37.5%,
|
||||||
|
49.99% {
|
||||||
|
-webkit-transform: rotate(135deg);
|
||||||
|
transform: rotate(135deg);
|
||||||
|
}
|
||||||
|
50%,
|
||||||
|
62.499% {
|
||||||
|
-webkit-transform: rotate(180deg);
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
62.5%,
|
||||||
|
74.999% {
|
||||||
|
-webkit-transform: rotate(225deg);
|
||||||
|
transform: rotate(225deg);
|
||||||
|
}
|
||||||
|
75%,
|
||||||
|
87.499% {
|
||||||
|
-webkit-transform: rotate(270deg);
|
||||||
|
transform: rotate(270deg);
|
||||||
|
}
|
||||||
|
87.5%,
|
||||||
|
99.999% {
|
||||||
|
-webkit-transform: rotate(315deg);
|
||||||
|
transform: rotate(315deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes fa-spin-fa-spinner {
|
||||||
|
0%,
|
||||||
|
12.499% {
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
12.5%,
|
||||||
|
24.999% {
|
||||||
|
-webkit-transform: rotate(45deg);
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
25%,
|
||||||
|
37.499% {
|
||||||
|
-webkit-transform: rotate(90deg);
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
37.5%,
|
||||||
|
49.99% {
|
||||||
|
-webkit-transform: rotate(135deg);
|
||||||
|
transform: rotate(135deg);
|
||||||
|
}
|
||||||
|
50%,
|
||||||
|
62.499% {
|
||||||
|
-webkit-transform: rotate(180deg);
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
62.5%,
|
||||||
|
74.999% {
|
||||||
|
-webkit-transform: rotate(225deg);
|
||||||
|
transform: rotate(225deg);
|
||||||
|
}
|
||||||
|
75%,
|
||||||
|
87.499% {
|
||||||
|
-webkit-transform: rotate(270deg);
|
||||||
|
transform: rotate(270deg);
|
||||||
|
}
|
||||||
|
87.5%,
|
||||||
|
99.999% {
|
||||||
|
-webkit-transform: rotate(315deg);
|
||||||
|
transform: rotate(315deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
.fa-rotate-90 {
|
.fa-rotate-90 {
|
||||||
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
|
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
|
||||||
-webkit-transform: rotate(90deg);
|
-webkit-transform: rotate(90deg);
|
||||||
|
|||||||
510
css/font-awesome.min.css
vendored
510
css/font-awesome.min.css
vendored
File diff suppressed because one or more lines are too long
@ -6,6 +6,11 @@
|
|||||||
animation: fa-spin 2s infinite linear;
|
animation: fa-spin 2s infinite linear;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.@{fa-css-prefix}-spin.@{fa-css-prefix}-spinner {
|
||||||
|
-webkit-animation: fa-spin-fa-spinner .8s infinite linear;
|
||||||
|
animation: fa-spin-fa-spinner .8s infinite linear;
|
||||||
|
}
|
||||||
|
|
||||||
@-webkit-keyframes fa-spin {
|
@-webkit-keyframes fa-spin {
|
||||||
0% {
|
0% {
|
||||||
-webkit-transform: rotate(0deg);
|
-webkit-transform: rotate(0deg);
|
||||||
@ -27,3 +32,74 @@
|
|||||||
transform: rotate(359deg);
|
transform: rotate(359deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes fa-spin-fa-spinner {
|
||||||
|
0%, 12.499% {
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
12.5%, 24.999% {
|
||||||
|
-webkit-transform: rotate(45deg);
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
25%, 37.499% {
|
||||||
|
-webkit-transform: rotate(90deg);
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
37.5%, 49.99% {
|
||||||
|
-webkit-transform: rotate(135deg);
|
||||||
|
transform: rotate(135deg);
|
||||||
|
}
|
||||||
|
50%, 62.499% {
|
||||||
|
-webkit-transform: rotate(180deg);
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
62.5%, 74.999% {
|
||||||
|
-webkit-transform: rotate(225deg);
|
||||||
|
transform: rotate(225deg);
|
||||||
|
}
|
||||||
|
75%, 87.499% {
|
||||||
|
-webkit-transform: rotate(270deg);
|
||||||
|
transform: rotate(270deg);
|
||||||
|
}
|
||||||
|
87.5%, 99.999% {
|
||||||
|
-webkit-transform: rotate(315deg);
|
||||||
|
transform: rotate(315deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fa-spin-fa-spinner {
|
||||||
|
0%, 12.499% {
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
12.5%, 24.999% {
|
||||||
|
-webkit-transform: rotate(45deg);
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
25%, 37.499% {
|
||||||
|
-webkit-transform: rotate(90deg);
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
37.5%, 49.99% {
|
||||||
|
-webkit-transform: rotate(135deg);
|
||||||
|
transform: rotate(135deg);
|
||||||
|
}
|
||||||
|
50%, 62.499% {
|
||||||
|
-webkit-transform: rotate(180deg);
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
62.5%, 74.999% {
|
||||||
|
-webkit-transform: rotate(225deg);
|
||||||
|
transform: rotate(225deg);
|
||||||
|
}
|
||||||
|
75%, 87.499% {
|
||||||
|
-webkit-transform: rotate(270deg);
|
||||||
|
transform: rotate(270deg);
|
||||||
|
}
|
||||||
|
87.5%, 99.999% {
|
||||||
|
-webkit-transform: rotate(315deg);
|
||||||
|
transform: rotate(315deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
@ -6,6 +6,11 @@
|
|||||||
animation: fa-spin 2s infinite linear;
|
animation: fa-spin 2s infinite linear;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.#{$fa-css-prefix}-spin.#{$fa-css-prefix}-spinner {
|
||||||
|
-webkit-animation: fa-spin-fa-spinner .8s infinite linear;
|
||||||
|
animation: fa-spin-fa-spinner .8s infinite linear;
|
||||||
|
}
|
||||||
|
|
||||||
@-webkit-keyframes fa-spin {
|
@-webkit-keyframes fa-spin {
|
||||||
0% {
|
0% {
|
||||||
-webkit-transform: rotate(0deg);
|
-webkit-transform: rotate(0deg);
|
||||||
@ -27,3 +32,74 @@
|
|||||||
transform: rotate(359deg);
|
transform: rotate(359deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes fa-spin-fa-spinner {
|
||||||
|
0%, 12.499% {
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
12.5%, 24.999% {
|
||||||
|
-webkit-transform: rotate(45deg);
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
25%, 37.499% {
|
||||||
|
-webkit-transform: rotate(90deg);
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
37.5%, 49.99% {
|
||||||
|
-webkit-transform: rotate(135deg);
|
||||||
|
transform: rotate(135deg);
|
||||||
|
}
|
||||||
|
50%, 62.499% {
|
||||||
|
-webkit-transform: rotate(180deg);
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
62.5%, 74.999% {
|
||||||
|
-webkit-transform: rotate(225deg);
|
||||||
|
transform: rotate(225deg);
|
||||||
|
}
|
||||||
|
75%, 87.499% {
|
||||||
|
-webkit-transform: rotate(270deg);
|
||||||
|
transform: rotate(270deg);
|
||||||
|
}
|
||||||
|
87.5%, 99.999% {
|
||||||
|
-webkit-transform: rotate(315deg);
|
||||||
|
transform: rotate(315deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fa-spin-fa-spinner {
|
||||||
|
0%, 12.499% {
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
12.5%, 24.999% {
|
||||||
|
-webkit-transform: rotate(45deg);
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
25%, 37.499% {
|
||||||
|
-webkit-transform: rotate(90deg);
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
37.5%, 49.99% {
|
||||||
|
-webkit-transform: rotate(135deg);
|
||||||
|
transform: rotate(135deg);
|
||||||
|
}
|
||||||
|
50%, 62.499% {
|
||||||
|
-webkit-transform: rotate(180deg);
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
62.5%, 74.999% {
|
||||||
|
-webkit-transform: rotate(225deg);
|
||||||
|
transform: rotate(225deg);
|
||||||
|
}
|
||||||
|
75%, 87.499% {
|
||||||
|
-webkit-transform: rotate(270deg);
|
||||||
|
transform: rotate(270deg);
|
||||||
|
}
|
||||||
|
87.5%, 99.999% {
|
||||||
|
-webkit-transform: rotate(315deg);
|
||||||
|
transform: rotate(315deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
76
src/assets/font-awesome/less/_spinning.less
vendored
76
src/assets/font-awesome/less/_spinning.less
vendored
@ -9,6 +9,11 @@
|
|||||||
animation: fa-spin 2s infinite linear;
|
animation: fa-spin 2s infinite linear;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.@{fa-css-prefix}-spin.@{fa-css-prefix}-spinner {
|
||||||
|
-webkit-animation: fa-spin-fa-spinner .8s infinite linear;
|
||||||
|
animation: fa-spin-fa-spinner .8s infinite linear;
|
||||||
|
}
|
||||||
|
|
||||||
@-webkit-keyframes fa-spin {
|
@-webkit-keyframes fa-spin {
|
||||||
0% {
|
0% {
|
||||||
-webkit-transform: rotate(0deg);
|
-webkit-transform: rotate(0deg);
|
||||||
@ -30,3 +35,74 @@
|
|||||||
transform: rotate(359deg);
|
transform: rotate(359deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes fa-spin-fa-spinner {
|
||||||
|
0%, 12.499% {
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
12.5%, 24.999% {
|
||||||
|
-webkit-transform: rotate(45deg);
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
25%, 37.499% {
|
||||||
|
-webkit-transform: rotate(90deg);
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
37.5%, 49.99% {
|
||||||
|
-webkit-transform: rotate(135deg);
|
||||||
|
transform: rotate(135deg);
|
||||||
|
}
|
||||||
|
50%, 62.499% {
|
||||||
|
-webkit-transform: rotate(180deg);
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
62.5%, 74.999% {
|
||||||
|
-webkit-transform: rotate(225deg);
|
||||||
|
transform: rotate(225deg);
|
||||||
|
}
|
||||||
|
75%, 87.499% {
|
||||||
|
-webkit-transform: rotate(270deg);
|
||||||
|
transform: rotate(270deg);
|
||||||
|
}
|
||||||
|
87.5%, 99.999% {
|
||||||
|
-webkit-transform: rotate(315deg);
|
||||||
|
transform: rotate(315deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fa-spin-fa-spinner {
|
||||||
|
0%, 12.499% {
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
12.5%, 24.999% {
|
||||||
|
-webkit-transform: rotate(45deg);
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
25%, 37.499% {
|
||||||
|
-webkit-transform: rotate(90deg);
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
37.5%, 49.99% {
|
||||||
|
-webkit-transform: rotate(135deg);
|
||||||
|
transform: rotate(135deg);
|
||||||
|
}
|
||||||
|
50%, 62.499% {
|
||||||
|
-webkit-transform: rotate(180deg);
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
62.5%, 74.999% {
|
||||||
|
-webkit-transform: rotate(225deg);
|
||||||
|
transform: rotate(225deg);
|
||||||
|
}
|
||||||
|
75%, 87.499% {
|
||||||
|
-webkit-transform: rotate(270deg);
|
||||||
|
transform: rotate(270deg);
|
||||||
|
}
|
||||||
|
87.5%, 99.999% {
|
||||||
|
-webkit-transform: rotate(315deg);
|
||||||
|
transform: rotate(315deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
76
src/assets/font-awesome/scss/_spinning.scss
vendored
76
src/assets/font-awesome/scss/_spinning.scss
vendored
@ -9,6 +9,11 @@
|
|||||||
animation: fa-spin 2s infinite linear;
|
animation: fa-spin 2s infinite linear;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.#{$fa-css-prefix}-spin.#{$fa-css-prefix}-spinner {
|
||||||
|
-webkit-animation: fa-spin-fa-spinner .8s infinite linear;
|
||||||
|
animation: fa-spin-fa-spinner .8s infinite linear;
|
||||||
|
}
|
||||||
|
|
||||||
@-webkit-keyframes fa-spin {
|
@-webkit-keyframes fa-spin {
|
||||||
0% {
|
0% {
|
||||||
-webkit-transform: rotate(0deg);
|
-webkit-transform: rotate(0deg);
|
||||||
@ -30,3 +35,74 @@
|
|||||||
transform: rotate(359deg);
|
transform: rotate(359deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes fa-spin-fa-spinner {
|
||||||
|
0%, 12.499% {
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
12.5%, 24.999% {
|
||||||
|
-webkit-transform: rotate(45deg);
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
25%, 37.499% {
|
||||||
|
-webkit-transform: rotate(90deg);
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
37.5%, 49.99% {
|
||||||
|
-webkit-transform: rotate(135deg);
|
||||||
|
transform: rotate(135deg);
|
||||||
|
}
|
||||||
|
50%, 62.499% {
|
||||||
|
-webkit-transform: rotate(180deg);
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
62.5%, 74.999% {
|
||||||
|
-webkit-transform: rotate(225deg);
|
||||||
|
transform: rotate(225deg);
|
||||||
|
}
|
||||||
|
75%, 87.499% {
|
||||||
|
-webkit-transform: rotate(270deg);
|
||||||
|
transform: rotate(270deg);
|
||||||
|
}
|
||||||
|
87.5%, 99.999% {
|
||||||
|
-webkit-transform: rotate(315deg);
|
||||||
|
transform: rotate(315deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fa-spin-fa-spinner {
|
||||||
|
0%, 12.499% {
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
12.5%, 24.999% {
|
||||||
|
-webkit-transform: rotate(45deg);
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
25%, 37.499% {
|
||||||
|
-webkit-transform: rotate(90deg);
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
37.5%, 49.99% {
|
||||||
|
-webkit-transform: rotate(135deg);
|
||||||
|
transform: rotate(135deg);
|
||||||
|
}
|
||||||
|
50%, 62.499% {
|
||||||
|
-webkit-transform: rotate(180deg);
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
62.5%, 74.999% {
|
||||||
|
-webkit-transform: rotate(225deg);
|
||||||
|
transform: rotate(225deg);
|
||||||
|
}
|
||||||
|
75%, 87.499% {
|
||||||
|
-webkit-transform: rotate(270deg);
|
||||||
|
transform: rotate(270deg);
|
||||||
|
}
|
||||||
|
87.5%, 99.999% {
|
||||||
|
-webkit-transform: rotate(315deg);
|
||||||
|
transform: rotate(315deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user