Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

spinning icons #4720

Comments

@leviwheatcroft
Copy link

@leviwheatcroft leviwheatcroft commented Feb 3, 2020

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
Copy link
Member

@tmorehouse tmorehouse commented Feb 3, 2020

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
Copy link
Member

@tmorehouse tmorehouse commented Feb 5, 2020

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

tmorehouse added a commit that referenced this issue Mar 12, 2020
@tmorehouse tmorehouse added the Status: Fixed / Implemented label May 10, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment