JSFiddle - React, Tailwind, and code Playground

by humanzing

HTML

<div class="loader">
      <svg id="e52u42290vwd1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 210 203" shape-rendering="geometricPrecision" text-rendering="geometricPrecision"><defs><filter id="e52u42290vwd10-filter" x="-400%" width="600%" y="-400%" height="600%"><feGaussianBlur id="e52u42290vwd10-filter-blur-0" stdDeviation="2,0" result="result"/></filter><filter id="e52u42290vwd11-filter" x="-400%" width="600%" y="-400%" height="600%"><feGaussianBlur id="e52u42290vwd11-filter-blur-0" stdDeviation="2,2" result="result"/></filter><filter id="e52u42290vwd12-filter" x="-400%" width="600%" y="-400%" height="600%"><feGaussianBlur id="e52u42290vwd12-filter-blur-0" stdDeviation="2,2" result="result"/></filter></defs><g id="e52u42290vwd2"><rect id="e52u42290vwd3" width="212" height="205" rx="0" ry="0" transform="matrix(1 0 0 1 -1 -1)" fill="rgb(51,51,51)" stroke="none" stroke-width="1" stroke-linecap="round"/><g id="e52u42290vwd4" display="none"><rect id="e52u42290vwd5" width="210" height="203" rx="0" ry="0" fill="rgb(0,0,0)" stroke="none" stroke-width="0"/></g></g><g id="e52u42290vwd6"><path id="e52u42290vwd7"...

CSS

body{
  padding:0 !important;
  margin:0 !important;
}
div.loader {
  position : fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #333;
  overflow :hide
}

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

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


div.loader svg {
  position: relative;
  height:  calc(100% / 4);
  width: calc(100% / 4);
  animation: loader 5s  both;
  animation-iteration-count: infinite;

}