JSFiddle - React, Tailwind, and code Playground

Fliplet spinner

by tonytlwu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.ui.min.js"></script>
<div>
  <span class="a"></span>
  <span class="b"></span>
  <span class="c"></span>
  <span class="d"></span>
</div>

CSS

html, body {
  width: 100%;
  height: 100%;
}

div {
  width: 64px;
  height: 64px;
  margin-left: -32px;
  margin-top: -32px;
  position: absolute;
  top: 50%;
  left: 50%;
}

span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 6px solid transparent;
  position: absolute;
  top: 0;
  left: 0;
/*   -webkit-transform: scale(0.1);
  transform: scale(0.1);
  opacity: 0;
   */}

.a {
  border-top-color: #00abd1;
}

.b {
  border-left-color: #e64435;
}

.c {
  border-bottom-color: #ffd133;
}

.d {
  border-right-color: #26ae4b;
}

JavaScript

$('div').velocity({
    rotateZ: "360deg"
}, {
	loop: true,
  easing: 'linear',
  duration: 800,
  delay: 0
}).find('span').velocity('transition.expandIn', {
	duration: 800,
  stagger: 600
});