spinning icons #4720
Description
Problem
Spinning icons are a great way of providing feedback to the user. Currently this library doesn't provide a way to do this.
Proposed Solution
add spin and pulse props to b-icon, if truthy, they should add bi-spin or bi-pulse classes to the svg element.
add appropriate css rules to those classes, see fontawesome styles below
Alternatives
Everyone implements this themselves
Additional context
The css rules would look something like this:
.bi-spin {
-webkit-animation: bi-spin 2s infinite linear;
animation: bi-spin 2s infinite linear;
}
.bi-pulse {
-webkit-animation: bi-spin 1s infinite steps(8);
animation: bi-spin 1s infinite steps(8);
}
@-webkit-keyframes bi-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes bi-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
Would love to have a go at preparing a PR for this if this feature seems desirable.