Skip to content

Instantly share code, notes, and snippets.

@XianYeeXing
Last active January 24, 2019 04:00
Show Gist options
  • Save XianYeeXing/f2808f22197961c950999fd8b9203561 to your computer and use it in GitHub Desktop.
Save XianYeeXing/f2808f22197961c950999fd8b9203561 to your computer and use it in GitHub Desktop.
/**
* EXAMPLE:
*
* /// HTML:
* <div.app-loading>
* <div.app-loading__backing>
* <img.app-loading__img src='https://media0.giphy.com/media/aFTt8wvDtqKCQ/giphy.gif?cid=3640f6095c35e19e7366515351ade54e'/>
* <div.app-loading__txts>
* <span.app-loading__txts__desp></span>
* <span.app-loading__txts__cnt></span>%
* </div>
* </div>
* </div>
*
* /// JS:
* const loader = createAppLoader({containerSelecter: '.app-loading', counterSelecter: '.app-loading__txts__cnt', despSelecter: '.app-loading__txts__desp', speed: 100});
*
* /// Start loading:
* loader.start('系統初始化');
*
* /// Start loading with different speed:
* loader.start('劇情載入中', 750);
*
* /// End loading:
* loader.end();
*
* /// End loading with callback
* loader.end(() => console.log('8816'));
*/
function __createAppLoader(opts) {
var containerEl = document.querySelector(opts.containerSelecter);
var counterEl = document.querySelector(opts.counterSelecter);
var despEl = document.querySelector(opts.despSelecter);
var speed = opts.speed;
var cb = function(){};
var n = 0;
var isDone = false;
var timeoutHandle = null;
var inc = function() {
if(isDone === true) {
speed = 1000/60;
}
if(n < 99) {
n = n + 1;
counterEl.innerHTML = n;
timeoutHandle = setTimeout(inc, speed);
return;
}
if(isDone === true) {
clearTimeout(timeoutHandle);
counterEl.innerHTML = '100';
timeoutHandle = setTimeout(function() {
containerEl.style.display = 'none';
cb();
}, speed);
}
};
var start = function(_desp, _speed) {
if(typeof _desp !== 'string') {
_desp = '';
}
if(typeof _speed === 'number') { /// Reset speed
speed = _speed;
}
cb = function(){};
n = 0;
isDone = false;
counterEl.innerHTML = n;
despEl.innerHTML = _desp;
containerEl.style.display = 'block';
inc();
};
var end = function(_cb) {
cb = _cb || function(){};
isDone = true;
};
return {
start: start,
end: end,
};
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment