JSFiddle - React, Tailwind, and code Playground

HTML

<script>
  $(document).on(showLoading);
</script> 
<html>
  <body>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus id mi non dictum. Nunc porta sapien vitae dolor condimentum tempor. Fusce vulputate ligula vel fermentum consequat. Quisque imperdiet finibus diam, eget semper purus auctor vel. Sed eleifend posuere massa id tincidunt. Vestibulum nec faucibus sapien. Nulla fermentum vitae purus eget hendrerit. Nunc augue nulla, venenatis ac sapien quis, luctus dictum mi. Maecenas tincidunt purus ipsum, a accumsan risus dapibus malesuada. Suspendisse mattis mi magna, eget egestas augue consequat non. 
  </body>
</html>
<script>
    $(document).ready(function () {
        $(document).on(removeLoading);
    });
</script>

JavaScript

var mySpinner = null;

function setupLoading() {
    $('<div id="divSpin" />').appendTo(document.body);

    var target = document.getElementById("divSpin");

    var opts = {
        lines: 13, // The number of lines to draw
        length: 20, // The length of each line
        width: 10, // The line thickness
        radius: 30, // The radius of the inner circle
        corners: 1, // Corner roundness (0..1)
        rotate: 8, // The rotation offset
        direction: 1, // 1: clockwise, -1: counterclockwise
        color: '#000', // #rgb or #rrggbb or array of colors
        speed: 1, // Rounds per second
        trail: 60, // Afterglow percentage
        shadow: false, // Whether to render a shadow
        hwaccel: false, // Whether to use hardware acceleration
        className: 'mySpin', // The CSS class to assign to the spinner
        zIndex: 2e9, // The z-index (defaults to 2000000000)
        top: '50%', // Top position relative to parent
        left: '50%' // Left position relative to parent
    };

    mySpinner = new Spinner(opts).spin(target);
}

function removeLoading() {
    mySpinner.stop();
}

function showLoading() {
    mySpinner.spin();
}