JSFiddle - React, Tailwind, and code Playground

by jasonwilczak

HTML

<div id='loader' class="hide">
        <div class="loading" align="center">
            <div class="loadImage"></div>       <div>Loading</div>
        </div>
    </div>

<div>Hi <button id="btn">Show Loader</button></div>

CSS

.loading
{
    font-family: Arial;
    font-size: 10pt;
    padding:20px;
    position: fixed;
    background-color: #ffffff;
    z-index: 99999;
    border-radius:5px;
}
.loadImage {
 background-image: url(https://www.webkit.org/blog-files/acid3-100.png);   
}
}
.hide
{
 display:none;   
}
.show
{
 display:block;   
}

JavaScript

document.getElementById('btn').onclick = function() {
    document.getElementById('loader').className = 'show';
    setTimeout(function() {
    document.getElementById('loader').className = 'hide';
    },5000);
}