JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<div class="loader">
    <div class="spinner"></div>
    <ul class="myskinsword">
        <li>M</li>
        <li>y</li>
        <li>S</li>
        <li>k</li>
        <li>i</li>
        <li>n</li>
        <li>s</li>
    </ul>
</div>

CSS

.loader .spinner {
width: 100px;
  height: 100px;
  border: 3px solid #e04006;
    color: #e04006;
  border-radius: 100px;
  border-left-color: rgba(0, 0, 0, 0);
  border-right-color: rgba(0, 0, 0, 0);
  margin-top: -50px;
  margin-left: -50px;
  position: absolute;
  top: 50%;
  left: 50%;
    background: #222;
  -webkit-animation: spin 1s linear infinite;
  -moz-animation: spin 1s linear infinite;
  animation: spin 1s linear infinite;
}

.loader {
  position: fixed;
  top: 50%;
  left: 50%;
    right: 50%;
  width: 100px;
  height: 100px;
  z-index: 50;
  zoom: 1!important;
 background: #222;
    padding: 20px;
}

.loader .myskinsword {
    text-align: center;
  position: relative;
  top: 50.5%;
  padding-left: 5px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.loader .myskinsword li {
  font-size: 16px;
  display: inline-block;
  margin: 0 -.05em;
  color: #e04006;
  -webkit-font-smoothing: antialiased;
  -webkit-animation: pulse 1.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite alternate forwards;
  -moz-animation: pulse 1.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite alternate forwards;
  animation: pulse 1.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite alternate forwards;
}

.loader .myskinsword li:nth-child(1) {
  -webkit-animation-delay: 0.2142857143s;
  -moz-animation-delay: 0.2142857143s;
  animation-delay: 0.2142857143s;
}

@-webkit-keyframes
spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes
spin{100%{-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}