JSFiddle - React, Tailwind, and code Playground

by justincook

HTML

<div id="a" class="box">A</div>
<div id="b" class="box">B</div>
<div id="c" class="box">C</div>

CSS

.box {
    float:left;
    width:100px;
    height:100px;
    border:1px solid #bbb;
    margin: 10px;
    padding:20px;
    text-align:center;
    border-radius:10px;
    background: #eee;    
}
.loading-centered
{
    background:url('http://www.ajaxload.info/images/exemples/24.gif') 50% 50% no-repeat;
    position:relative;
    width:100px;
    height:100px;
    margin-left:-50px;
    margin-top:-50px;
    top:50%;
    left:50%;
}

JavaScript

$.fn.loading = function(show){
    if(show){
        this.prepend('<div class="loading-centered"></div>');
        this.css({ opacity: 0.3 });
    }else{
        this.children('.loading-centered').remove();
        this.css({ opacity: 1 });
    }
};

$('#a').loading(true); //start  
setTimeout(function(){ $('#a').loading(false); }, 3000); // stop