JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<body class="my-loader" >

<a href="javascrip:void(0);" class="show">Show Loader</a>
</body>

CSS

.preloader-container {
      position: fixed;
      z-index: 1031;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: transparent;
      display: block;
      overflow: hidden;
      padding: 25%;
    }

    .preloader-center {
      position: absolute;
      padding: 15px;
      top: 10%;
      left:30%;
      -ms-transform: translateX(-50%) translateY(-50%);
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      background: transparent;
      z-index: 1000;
      font-size: 60px;
    }

JavaScript

function showLoader(container){
         var html = '<div class="preloader-container js-busy-loader"><div class="preloader-center"><img src="http://i49.tinypic.com/j5z8mb.gif"></div></div>';
                $(container).find(".js-ajax-loader,.js-busy-loader").remove();
                $(container).append(html);
    }

     function hideLoader(container){
            if(typeof container == 'string' && container!==''){
                $(container).find(".s-ajax-loader,.js-busy-loader").remove();
            }else{
                $("body").find(".s-ajax-loader,.js-busy-loader").remove();
            }
     }
     
     $(".show").on("click",function(){
     		showLoader(".my-loader");
     });
     
     $(".hide").on("click",function(){
     		hideLoader();
     });