Fakeloader / Page loader with data

HTML
<div id="fakeloader" data-color="#222" data-size="50" data-time="2" data-gif="http://codepad.co/img/icn_logo.png"></div>
CSS
.flex { display: -webkit-box; display: -ms-flexbox; display: flex; } .justify-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .align-items-center { -webkit-box-align: center; -ms-flex-align: center; -ms-grid-row-align: center; align-items: center; }
JAVASCRIPT
jQuery(document).ready(function($) { $('#fakeloader').css( { 'position':'fixed', 'top':'0', 'left':'0', 'width':'100%', 'height':'100%', 'background-color': $('#fakeloader').attr("data-color"), 'z-index':'999999' } ).prepend( '<img src="' + $('#fakeloader').attr("data-gif") + '">' ).addClass( 'flex justify-center align-items-center' ); $('#fakeloader img').css( { 'width': $('#fakeloader').attr("data-size") + 'px', 'height':'auto' } ); function hideFakeloader () { $('#fakeloader').fadeOut(700, 'swing', function() { $(this).remove(); }); } setTimeout(hideFakeloader, $('#fakeloader').attr("data-time") * 1000); });
Expand for more options Login