//amagiloader.js
const AmagiLoader = {
__loader: null,
show: function () {
if (this.__loader == null) {
var divContainer = document.createElement('div');
divContainer.style.position = 'absolute';
divContainer.style.left = '0';
divContainer.style.top = '0';
divContainer.style.width = '100vw';
divContainer.style.height = '100vh';
divContainer.style.backgroundColor = 'rgba(250, 250, 250, 0.80)';
var div = document.createElement('div');
div.style.position = 'absolute';
div.style.left = '50%';
div.style.top = '50%';
div.style.zIndex = '9999';
div.style.height = '64px';
div.style.width = '64px';
div.style.margin = '-76px 0 0 -76px';
div.style.border = '8px solid #e1e1e1';
div.style.borderRadius = '50%';
div.style.borderTop = '8px solid #F36E21';
div.animate([
{ transform: 'rotate(0deg)' },
{ transform: 'rotate(360deg)' }
], {
duration: 2000,
iterations: Infinity
});
divContainer.appendChild(div);
this.__loader = divContainer
document.body.appendChild(this.__loader);
}
this.__loader.style.display="";
},
hide: function(){
if(this.__loader!=null)
{
this.__loader.style.display="none";
}
}
}
Usage //index.html
<html>
<head></head>
<body>
<p>asdsadasd
asdsadasdd
asdasdasd</p>
<script src="amagiloader.js"></script>
<script>
AmagiLoader.show();
setTimeout(() => {
AmagiLoader.hide();
}, 3000);
</script>
</body>
</html>
