Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/bootstrap-vue/bootstrap-vue/issues/4720 below:

spinning icons · Issue #4720 · bootstrap-vue/bootstrap-vue · GitHub

Spinning icons are a great way of providing feedback to the user. Currently this library doesn't provide a way to do this.

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

Everyone implements this themselves

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.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4