how would you make an icon spin indefinitely?
seiyria opened this issue ยท 3 comments
Much like the animations in font awesome, I'd like to have a rotating refresh
icon. Is this possible with this library currently?
This can be achieved by CSS.
You may include font-awesome.css, set class="fa-spin" and it should work.
It's a pretty bad suggestion to bring in a whole other icon library just because they have spinning icons.
Here's what they have:
animation: fa-spin 2s infinite linear
I've tried applying this to the SVG, the SVG container (ng-md-icon
), and other elements with no success. [edit] Turns out I forgot the keyframes. Whoops.
Well, wanted to encourage re-use.
This is the css relevent to fa-spin
& fa-pulse
:
.fa-spin {
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
.fa-pulse {
-webkit-animation: fa-spin 1s infinite steps(8);
animation: fa-spin 1s infinite steps(8);
}
@-webkit-keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
For other animation effects, you may copy / paste parts from font-awesome.css or include it entirely.