JSFiddle - React, Tailwind, and code Playground

by winsent

HTML

<svg class="rotate-animation circle" width="106px" height="106px" viewBox="17 17 106 106" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <path d="M67.9,72.08 C66.74,70.9 66.74,69 67.9,67.83 C69.08,66.65 70.98,66.65 72.16,67.83 C73.33,69 73.33,70.9 72.16,72.08 C70.98,73.25 69.08,73.25 67.91,72.08 L67.9,72.08 Z M75.35,72.18 C75.91,70.88 75.95,69.38 75.45,68.02 L75.97,67.52 L86.47,69.02 C88.61,69.32 90.74,68.38 91.93,66.57 L119.73,24.43 C120.66,23.1 120.87,21.39 120.3,19.87 L119.48,17.72 L72.46,64.72 C70.98,64.05 69.28,64.02 67.79,64.65 L67.51,64.38 L69.01,53.88 C69.31,51.74 68.36,49.62 66.55,48.43 L24.41,20.63 C23.08,19.7 21.37,19.49 19.84,20.06 L17.71,20.86 L64.67,67.83 C64.09,69.29 64.14,70.93 64.81,72.38 L64.35,72.83 L53.85,71.33 C51.72,71.03 49.6,71.98 48.41,73.79 L20.61,115.92 C19.68,117.25 19.46,118.96 20.04,120.48 L20.84,122.61 L68.1,75.37 C69.42,75.84 70.86,75.82 72.16,75.3 L72.83,75.97 L71.33,86.47 C71.01,88.62 71.97,90.74 73.77,91.93 L115.91,119.73 C117.26,120.66 118.97,120.87 120.49,120.3 L122.64,119.5 L75.34,72.2 L75.35,72.18 Z" id="Shape" stroke="none" fill="#333333" fill-rule="evenodd"></path>
</svg>

CSS

.circle {
    height: 50px;
    width: 50px;
    top: 40%;
    left: 40%;
    position: absolute;
}

.rotate-animation{
  animation: RotateAnimation linear 4s;
  -webkit-animation: RotateAnimation linear 1.5s;
  -moz-animation: RotateAnimation linear 5s;
  -o-animation: RotateAnimation linear 5s;
  -ms-animation: RotateAnimation linear 5s;
  
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
  
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: 50% 50%;
  
  -moz-animation-iteration-count: infinite;
  -moz-transform-origin: 50% 50%;
  
  -o-animation-iteration-count: infinite;
  -o-transform-origin: 50% 50%;
  
  -ms-animation-iteration-count: infinite;
  -ms-transform-origin: 50% 50%;
}

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

@-moz-keyframes RotateAnimation{
  0% {
    -moz-transform:  rotate(0deg) ;
  }
  100% {
    -moz-transform:  rotate(360deg) ;
  }
}

@-webkit-keyframes RotateAnimation {
  0% {
    -webkit-transform:  rotate(0deg) ;
  }
  100% {
    -webkit-transform:  rotate(360deg) ;
  }
}

@-o-keyframes RotateAnimation {
  0% {
    -o-transform:  rotate(0deg) ;
  }
  100% {
    -o-transform:  rotate(360deg) ;
  }
}

@-ms-keyframes RotateAnimation {
  0% {
    -ms-transform:  rotate(0deg) ;
  }
  100% {
    -ms-transform:  rotate(360deg) ;
  }
}