Spinning animation around FabButton?


#1

How could I do that? What should I use? Because I dont even have idea how to start doing this, and what should I use.
And I want a simple spinning animation around FabButton.


#2

I have done something similar here:
https://getevento.com - a spinning circle when hovering on a fab button.

Using the following CSS:


// see https://codepen.io/giana/embed/yYBpVY?height=636&theme-id=0&slug-hash=yYBpVY&default-tab=result&user=giana
$spin-border-color: #4f7b81;

button.fab {
  &::before, &::after {
    border-radius: 100%;
    box-sizing: inherit;
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }

  &::before {
    border: 2px solid transparent;
  }

  &:hover::before {
    border-bottom-color: $spin-border-color;
    border-right-color: $spin-border-color;
    border-top-color: $spin-border-color;

    transition:
      border-top-color 0.15s linear,
      border-right-color 0.15s linear 0.10s,
      border-bottom-color 0.15s linear 0.20s;
  }

  &::after {
    border: 0 solid transparent;
  }

  &:hover::after {
    border-top: 2px solid $spin-border-color;
    border-left-width: 2px;
    border-right-width: 2px;
    transform: rotate(270deg);
    transition:
      transform 0.4s linear 0s,
      border-left-width 0s linear 0.35s;
  }
}