JSFiddle - React, Tailwind, and code Playground

by Jed Mao

HTML

<img class="spinner" src="https://www.hautelook.com/bundles/hautelooklayout/images/spinner/spinner.png"/>
<img src="https://jira.hautelook.net/secure/attachment/81951/5.GIF"/>
<img src="https://jira.hautelook.net/secure/attachment/81950/ajax-loader.gif"/>

SCSS

body {
    background-color: tomato;
}

.spinner {
  -webkit-animation: spinner 1s cubic-bezier(0.45, 0.75, 0.75, 0.45) infinite;
  -moz-animation: spinner 1s cubic-bezier(0.45, 0.75, 0.75, 0.45) infinite;
  -ms-animation: spinner 1s cubic-bezier(0.45, 0.75, 0.75, 0.45) infinite;
  -o-animation: spinner 1s cubic-bezier(0.45, 0.75, 0.75, 0.45) infinite;
  animation: spinner 1s cubic-bezier(0.45, 0.75, 0.75, 0.45) infinite;
}

@-webkit-keyframes spinner {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(359deg);
  }
}
@-moz-keyframes spinner {
  from {
    -moz-transform: rotate(0deg);
  }

  to {
    -moz-transform: rotate(359deg);
  }
}
@-ms-keyframes spinner {
  from {
    -ms-transform: rotate(0deg);
  }

  to {
    -ms-transform: rotate(359deg);
  }
}
@-o-keyframes spinner {
  from {
    -o-transform: rotate(0deg);
  }

  to {
    -o-transform: rotate(359deg);
  }
}
@keyframes spinner {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(359deg);
  }
}