LOADER 3

by davidxmartins

HTML

<div id="loading-screen">
  <div class="loader"></div>
  
  <div class="logo-container">
   <svg class="logo-icon" 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

#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;
  background: green;
}

.loader {
  position: absolute;
  border: 40px solid darkgreen;
  border-radius: 50%;
  border-top: 40px solid white;
  width: 150px;
  height: 150px;
  animation: spinner 3s linear infinite;
  background: darkgreen;
}

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

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

  100% {
    transform: rotate(360deg);
  }
}

/* unrelated */


svg {
  fill: white;
}