JSFiddle - React, Tailwind, and code Playground

by charlescarver

HTML

<div class="container">
    <div class="first"></div>
    <div class="second"></div>
    <div class="under"></div>    
</div>

CSS

body{
    background-color:#1d2026;
}

.container{
    width:200px;
    height:200px;
    position:relative;
    -webkit-transition: -webkit-transform 10s linear;
}

.rotate{
    -webkit-transform:rotate(720deg);
}

.first {
    position:absolute;
    width:100%;
    height:100%;
    background:-webkit-linear-gradient(-90deg, transparent 50%, #1d2026 50%, #1d2026), -webkit-linear-gradient(90deg, transparent 50%, #1d2026 50%, #1d2026);
    z-index:2;
}

.second {
    position:absolute;
    width:100%;
    height:100%;
    -webkit-mask-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
    background:-webkit-linear-gradient(-90deg, transparent 50%, #1d2026 50%, #1d2026);
    z-index:1;
}

.under {
    position:absolute;
    width:100%;
    height:100%;
    z-index:0;
    background-image:url(http://i.imgur.com/QO9uZRA.png);
    background-size:100%;
}

JavaScript

var deg = 0;
var i = 0;

first();

//$(".container").addClass("rotate");

function first() {
    int = setInterval(function () {
        spin(i);
        i++
        if (i > 180) {
            clearInterval(int);
            second();
        }
    }, 1);
}

function second() {
    int2 = setInterval(function () {
        spin(i);
        i--
        if (i < 0) {
            clearInterval(int2);
            first();
        }
    }, 1);
}

function spin(degree) {
    if (degree >= 0 && degree < 90) {
        $(".first").show();
        deg = 90 + (degree * 2);
        $(".first").css("background", "-webkit-linear-gradient(-90deg, transparent 50%, #1d2026 50%, #1d2026), linear-gra-webkit-dient(" + deg + "deg, transparent 50%, #1d2026 50%, #1d2026)");
    } else if (degree >= 90 && degree <= 180) {
        $(".first").hide();
        deg = 90 + ((degree - 180) * 2);
        $(".second").css("background", "-webkit-linear-gradient(" + deg + "deg, transparent 50%, #1d2026 50%, #1d2026)");
    }
}