mirror of
https://github.com/FortAwesome/Font-Awesome.git
synced 2025-01-15 09:40:27 +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 */
|
||||
.fa-lg {
|
||||
font-size: 1.33333333em;
|
||||
font-size: 1.3333333333333333em;
|
||||
line-height: 0.75em;
|
||||
vertical-align: -15%;
|
||||
}
|
||||
@ -38,12 +38,12 @@
|
||||
font-size: 5em;
|
||||
}
|
||||
.fa-fw {
|
||||
width: 1.28571429em;
|
||||
width: 1.2857142857142858em;
|
||||
text-align: center;
|
||||
}
|
||||
.fa-ul {
|
||||
padding-left: 0;
|
||||
margin-left: 2.14285714em;
|
||||
margin-left: 2.142857142857143em;
|
||||
list-style-type: none;
|
||||
}
|
||||
.fa-ul > li {
|
||||
@ -51,13 +51,13 @@
|
||||
}
|
||||
.fa-li {
|
||||
position: absolute;
|
||||
left: -2.14285714em;
|
||||
width: 2.14285714em;
|
||||
top: 0.14285714em;
|
||||
left: -2.142857142857143em;
|
||||
width: 2.142857142857143em;
|
||||
top: 0.14285714285714285em;
|
||||
text-align: center;
|
||||
}
|
||||
.fa-li.fa-lg {
|
||||
left: -1.85714286em;
|
||||
left: -1.8571428571428572em;
|
||||
}
|
||||
.fa-border {
|
||||
padding: .2em .25em .15em;
|
||||
@ -80,6 +80,10 @@
|
||||
-webkit-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 {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
@ -100,6 +104,90 @@
|
||||
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 {
|
||||
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
|
||||
-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;
|
||||
}
|
||||
|
||||
.@{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 {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
@ -27,3 +32,74 @@
|
||||
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;
|
||||
}
|
||||
|
||||
.#{$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 {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
@ -27,3 +32,74 @@
|
||||
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;
|
||||
}
|
||||
|
||||
.@{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 {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
@ -30,3 +35,74 @@
|
||||
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;
|
||||
}
|
||||
|
||||
.#{$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 {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
@ -30,3 +35,74 @@
|
||||
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