JSFiddle - React, Tailwind, and code Playground

by Sergey khorev

HTML

<div class="spinner">
  <img class="spinner-img" src="https://xwallet.pundix.com/img/ShdowLight.2cdc1b1f.svg" height="300px" width="300px" alt="">
</div>

<style>
.spinner {
    height:300px;
    width:300px;
    position: absolute;
    -webkit-animation-name: spin;
    -webkit-animation-duration: 7000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}

.spinner-img{-webkit-animation: fadein 5000ms ease-in alternate infinite;}

@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}
</style>

CSS

div {
    margin: 120px;
    width: 1100px;
    height: 1120px;
    background: #f00;
    -webkit-animation-name: spin;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;    
}

@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}