JSFiddle - React, Tailwind, and code Playground

by Newton Anbarasu

HTML

<div class="inner-contain">
    <div class="circle"></div>
    <div class="circle-text">loading...</div>
</div>

CSS

body {
    background-color: #fff;
    margin-top: 25px;
}
.inner-contain {
    padding: 10px;
    border-radius: 4px;
    height: 125px;
    margin-bottom: 10px;
    text-align:center;
    background:#ddd;
}
.circle {
    border: 4px rgba(0, 0, 0, 0.25) solid;
    border-top: 4px black solid;
    border-radius: 50%;
    -webkit-animation: circlerot .6s infinite linear;
    animation: circlerot .6s infinite linear;
    width: 30px;
    height: 30px;
    clear: both;
    margin: 20px auto;
    margin-bottom:10px;
}
.circle-text {
    font:16px lato;
    padding-left:10px;
}
@-webkit-keyframes circlerot {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(359deg);
    }
}
@keyframes circlerot {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}