JSFiddle - React, Tailwind, and code Playground

by Tinh Nguyen Nhu

HTML

<!-- rotateLoading -->

<link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet">

<i class="fas fa-spinner ic_loading"></i>

CSS

/* rotateLoading */
@-moz-keyframes rotateLoading {
    0% {
        -moz-transform: rotate(0deg);
        transform: rotate(0deg)
    }

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

@-webkit-keyframes rotateLoading {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

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

@keyframes rotateLoading {
    0% {
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

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

.ic_loading {
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -moz-animation: rotateLoading 5s ease 0s infinite normal;
    -webkit-animation: rotateLoading 5s ease 0s infinite normal;
    animation: rotateLoading 1.8s linear 0s infinite normal;
}

JavaScript

/* rotateLoading */