spinning icons

[leviwheatcroft]

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.

[tmorehouse]

As a workaround, one can apply a CSS transform animation to spin (or scale) the icon via a custom class applied to the icon component

If the feature is added, the animations should respect the prefers-reduced-motion media query to disable the animation for some users. https://getbootstrap.com/docs/4.4/getting-started/accessibility/#reduced-motion

The CSS classes should also be name-spaced with the .b-icon BootstrapVue custom classes:

.b-icon {
  &.bi-spin {
    animation: bicon-spin 2s infinite linear;
  }
  &.bi-pulse {
    animation: bicon-spin 1s infinite steps(8);
  }
}

And the duration of the animation could be set via SASS variables.

Note that the prefixed properties will automatically be added by postcss autoprefixer plugin during compilation of the SCSS, based on the targetted browsers in browserlist.rc

[tmorehouse]

Another option we might be able to do is allow b-spinner to accept custom content via the default slot to spin or throb.

one could do:

<b-spinner label="Spinning star">
  <b-icon icon="star-fill"></b-icon>
</b-spinner>

This might be the simplest approach, since the spin and grow (throb) animations already exist in Bootstrap V4 CSS. And it would allow users to spin almost anything.

It would just need a few minimal CSS/Style overrides