JSFiddle - React, Tailwind, and code Playground

by chadarsenault

HTML

<section class="spinner">
  <div class="top">
    <div class="ul"></div>
    <div class="ur"></div>
  </div>
  <div class="bottom">
    <div class="ll"></div>
    <div class="lr"></div>
  </div>
</section>

CSS

.spinner {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  background-color: #333;
}

.spinner,
.spinner * {
  box-sizing: border-box;
}

.top,
.bottom {
  width: 100%;
  height: 50%;
}

.ul,.ur,
.ll,.lr {
  width: 50%;
  height: 100%;
  float: left;
}

.ul { 
  border-top-left-radius: 100%;
  background-color: #fff;
}
.ur {
  border-top-right-radius: 100%;
  background-color: #fff;
}
.ll {
  border-bottom-left-radius: 100%;
  background-color: #fff;
}
.lr {
  border-bottom-right-radius: 100%;
  background-color: #fff;
}

.fade-out {
  opacity: 0.0;
  transition: opacity 2500ms linear;
}

.fade-in {
  opacity: 1.0;
  transition: opacity 2500mst linear;
}

JavaScript

var ul = $('.ul');

function loopTransition(e) {
    if (ul.hasClass('fade-out')) {
        ul.removeClass('fade-out');
        ul.addClass('fade-in');
    } else {
        if(ul.hasClass('fade-in')) {
            ul.removeClass('fade-in');
        }
        ul.addClass('fade-out');
    }
}

$(document).ready(function() {
    ul.addClass('fade-out');

    ul.on("transitionend", loopTransition, false);
    ul.on("webkitTransitionEnd", loopTransition, false);
    ul.on("mozTransitionEnd", loopTransition, false);
    ul.on("msTransitionEnd", loopTransition, false);
    ul.on("oTransitionEnd", loopTransition, false);
});