JSFiddle - React, Tailwind, and code Playground

by davidxmartins

HTML

<div id="loading-screen">
  <div class="loader"></div>
  
  <div class="loader__inner-logo__container">
   <svg class="loader__inner-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
  <title>Logo Icon</title>
  <path d="M42.847,59.222H.02c0,.26-.02.517-.02.778A59.722,59.722,0,0,0,7.394,88.865Z"/>
  <path d="M42.1,75.391,14.19,98.729A60.05,60.05,0,0,0,42.1,117.284Z"/>
  <path d="M44.295,47.3,13.761,21.766A59.777,59.777,0,0,0,1.36,47.3Z"/>
  <path d="M118.64,47.3a59.777,59.777,0,0,0-12.4-25.529L75.706,47.3Z"/>
  <path d="M77.887,75.382v41.905a60.05,60.05,0,0,0,27.923-18.558Z"/>
  <path d="M77.153,59.222l35.453,29.643A59.722,59.722,0,0,0,120,60c0-.261-.016-.518-.02-.778Z"/>
  <path d="M60,0A59.737,59.737,0,0,0,22.285,13.347L54.032,39.89V119.7c1.963.194,3.954.3,5.968.3s4-.1,5.959-.3V39.9L97.715,13.347A59.737,59.737,0,0,0,60,0Zm0,28.548A10.584,10.584,0,1,1,70.584,17.964,10.584,10.584,0,0,1,60,28.548Z"/>
</svg>
</div>

</div>

CSS

* {
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 1;
  box-sizing: border-box;
}


#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #FFF;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}


/* loader */

.loader {
  position: absolute;
  border: 40px solid lightgrey;
  border-radius: 50%;
  border-top: 40px solid green;
  width: 150px;
  height: 150px;
  animation: spinner 3s linear infinite;
  box-sizing: unset;
}

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

/* logo inside loader */

.loader__inner-logo__container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 130px;
  height: 130px;
  z-index: 1;
}

.loader__inner-logo {
  fill: green;
}