JSFiddle - React, Tailwind, and code Playground

spinner

by bitstarr

HTML

<div class="pf-container pf-spinner">
     <img src="//media2.marktjagd.com/images/2/5/2/5/8/7/9/530x750_nd.jpg" class="pf-image pf-image-page" />
    <img src="//media1.marktjagd.com/images/2/5/2/5/8/8/0/530x750_nd.jpg" class="pf-image pf-image-page" />
</div>

CSS

/* @section 1. container */

.pf-container
{
    background: red;
    text-align: center;
    height: 50%;
}

/* @section 2. image */

.pf-image
{
    max-width: 100%;
}

.pf-image-page
{
    max-width: 20%;
}

/* @section 3. spinner */

.pf-spinner
{
    position: relative;
}

.pf-spinner:after
{
	-webkit-animation: scale 0.4s 2s, rotate 0.6s infinite linear;
    animation: scale 0.4s 2s, rotate 0.6s infinite linear;
    font-size: 0.75rem;
    border: 0.75rem solid rgba(0, 0, 0, 0.1);
    border-left-color: #9dc42e;
    border-radius: 50%;
    content: '';
    height: 5rem;
    left: 50%;
    margin: -2.5rem 0 0 -2.5rem;
    position: absolute;
    top: 50%;
    width: 5rem;
    z-index: 1;
}

/* @section 3.1 rotate */

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

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