JSFiddle - React, Tailwind, and code Playground

by Korah Babu Varghese

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css">
<div class="spinner_div"><i class="fa fa-circle-o-notch slow-spin" style="font-size:10vw;color:#1DE9B6"></i>
</div>

CSS

.slow-spin {
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;
  text-align: center;
  /* float: none; */
  display: block;
  font-size: 80px !important;
  /* height: auto; */
  /* width: auto; */
  /* vertical-align: middle; */
  /* left: 0; */
  /* right: 0; */
  /* bottom: 0; */
  /* top: 0; */
  /* position: absolute; */
  /* margin: 0; */
}

.spinner_div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100px;
  width: 100px;
  margin: auto;
}