How to implement a loading icon?

Ignition
4

I actually do this with an icon and a simple CSS animation in a theme

Icon Props:

path: ""
color: ""
basis: 25px

Icon style:

{
  "border": "solid 5px #cfd0d1",
  "borderBottomColor": "#1c87c9",
  "borderRadius": "50%",
  "width": "25px",
  "animation": "1.5s linear infinite spinner",
  "height": "25px"
}

Animation in theme:

@keyframes spinner {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg); }
}

Ta-Dah! (It is a lot smoother but the gif made it a bit choppier for some reason)
Screen Recording 2021-12-09 at 11.26.46 AM-2

13 Likes