JSFiddle - React, Tailwind, and code Playground

by veer_vin

HTML

<div id="loaderWrap">
  <div class="loader"></div>
  <span>Loading...</span>
</div>

CSS

#loaderWrap {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 88px;
  height: 115px;
  margin-top: -58px;
  margin-left: -44px;
  text-align: center;
}

#loaderWrap span {
  margin-top: 10px;
  display: inline-block;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#loaderWrap .loader {
  border: 8px solid #f3f3f3;
  border-radius: 50%;
  border-top: 8px solid #999;
  width: 70px;
  height:70px;
  -webkit-animation: spinLoader 2s linear infinite; /* Safari */
  animation: spinLoader 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spinLoader {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

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