<div class='cm-body'> <div class='cm-content'> <div class='cm-item-list'> <div class='cm-item'><span>somedata</span></div> <div class='cm-item'><span>somedata</span></div> <div class='cm-item'><span>somedata</span></div> <div class='cm-item'><span>somedata</span></div> </div> </div> <div class='cm-overlay'> <div class='cm-overlay-content-wrapper'> <div class='cm-overlay-image'><img src='path-to-preloader' class='cm-overlay-preloader-image'></div> <div class='cm-overlay-text'><span class='cm-overlay-preloader-text'>Please wait Loading data....</span></div> </div> </div> </div>
.cm-overlay{ display:none; position:fixed; width:0px; height:0px; } .cm-overlay-hide { display:none; } .cm-overlay-show{ display: block; position: fixed; top:0px; left:0px; bottom:0px; right:0px; opacity:0.8; background-color: #c5c5c5; z-index: 100; width: 100%; height: 100%; } .cm-overlay-content-wrapper{ background-color: #ffffff; display: block; position: relative; min-width: 300px; min-height: 300px; margin: 0 auto; width: 50%; height: 50%; top: 10%; opacity:1; } .cm-overlay-image{ display: block; position: relative; margin: 0 auto; height: 65%; } .cm-overlay-preloader-image{ display: block; position: relative; width: 125px; top: 50px; margin: 0 auto; border:0px; } .cm-overlay-text{ display: block; position: relative; height: 35%; } .cm-overlay-preloader-text{ display: block; position: relative; text-align: center; font-family: Oswald; font-size: 30px; }
function toogle_overlay(isShown) { try { var overlay = $(document).find('.cm-overlay'); if (isShown != undefined && overlay != undefined) { if (isShown === true) { $(overlay).addClass('cm-overlay-show').removeClass('cm-overlay-hide'); } else { $(overlay).addClass('cm-overlay-hide').removeClass('cm-overlay-show'); } } } catch (err) { } }
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)