Skip to content

Instantly share code, notes, and snippets.

@klauskpm
Last active August 29, 2015 14:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save klauskpm/86ada377fa9beb9b9de5 to your computer and use it in GitHub Desktop.
Save klauskpm/86ada377fa9beb9b9de5 to your computer and use it in GitHub Desktop.
Plugin to create an waiting page until something is done
// jQuery Plugin - Loader
//
// Needs:
// - jQuery(2.1.1) >> http://code.jquery.com/jquery-2.1.1.js
// - Centralize >> https://gist.github.com/klauskpm/fc25fef2b4c94131d854
(function($) {
/**
* Plugin to create an waiting page until something is done
* @param {Object.<array, integer, boolean>} options Object with waiting
* texts(texts), time span between actions(interval), and the option to
* kill the loader(kill)
* @returns {Boolean|jQuery.this}
*/
$.fn.loader = function(options) {
var settings = $.extend({
texts: ['Loading...', 'Waiting for Maya\'s end of the world'],
interval: 2000,
kill: false
}, options),
$loaderBackground = $('<div class="loader-background"></div>'),
$loaderText = $('<span class="loader-text"></span>'),
$loaderHtml = $('<div class="loader"></div>').append($loaderBackground, $loaderText),
textNumber = 0;
if(settings.kill) {
$('.loader').remove();
return false;
}
$('html body').append($loaderHtml);
if(settings.texts.length) {
textNumber = Math.floor(Math.random() * settings.texts.length);
$('.loader-text').text(settings.texts[textNumber]);
$('.loader-text').centralize(true);
if(settings.texts.length>1) {
setInterval(function(){
var randomNumber = Math.floor(Math.random() * settings.texts.length);
if(textNumber==randomNumber) {
if(typeof(settings.texts[textNumber+1])!=='undefined') {
textNumber++;
} else {
textNumber--;
}
} else {
textNumber = randomNumber;
}
$('.loader-text').text(settings.texts[textNumber]);
}, settings.interval);
}
} else {
console.error('There is no loader text');
}
return this;
};
})(jQuery);
/** Loader **/
.loader {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 10;
}
.loader-background {
background: black;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
opacity: 0.8;
filter: alpha(opacity=80);
cursor: pointer;
z-index: 12;
}
.loader-text {
cursor: default;
color: white;
text-align: center;
position: fixed;
width: 100%;
font-size: 28px;
font-weight: 400;
z-index: 14;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment