ローディング画面

loading-curtain.js

!function(){

// style
var style_inner = `
.loading-container{
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	display:none;
}
.loading-outer{
	width:100%;
	height:100%;
	position:absolute;
	display:flex;
	background:#fcfcfc;
	clip:rect(0,100vw,100vh,0);
	-webkit-animation:loading-start .75s linear 0s 1;
	-moz-animation:loading-start .75s linear 0s 1;
}
.loading-outer.loading-end{
	-webkit-animation:loading-end .75s linear 0s 1;
	-moz-animation:loading-end .75s linear 0s 1;
}
.loading-msg{
	margin:auto;
	font-size:80px;
	color: #b0b0b0;
}

@-webkit-keyframes loading-start {
	0% { clip:rect(0,100vw,0,0); }
}

@-webkit-keyframes loading-end {
	100% { clip:rect(100vh,100vw,100vh,0); }
}

@-moz-keyframes loading-start {
	0% { clip:rect(0,100vw,0,0); }
}

@-moz-keyframes loading-end {
	100% { clip:rect(100vh,100vw,100vh,0); }
}

`

CSS.supports("-webkit-background-clip", "text") && (style_inner += `

.loading-msg{
	color: transparent;
	background-color:#dedede;
	text-shadow:3px 2px 2px rgba(255,255,255,0.7);
	-webkit-background-clip:text;
	background-clip:text;
	background-color:#dedede;
}

`)

// html
/*
<div class="loading-container">
	<div class="loading-outer">
		<div class="loading-msg">Loading...</div>
	</div>
</div>
*/

// make html elements
var lc = document.createElement("div")
lc.className = "loading-container"
var lo = document.createElement("div")
lo.className = "loading-outer"
var lm = document.createElement("div")
lm.className = "loading-msg"
lm.textContent = "Loading..."
lo.appendChild(lm)
lc.appendChild(lo)

// add events
;["", "webkit", "MS", "o"].forEach(pfix => {
	var animationend = pfix ? pfix + "Animationend" : "animationend"
	lo.addEventListener(animationend, function(eve){
		eve.animationName === "loading-start" && cb()
		eve.animationName === "loading-end" && animation_end()
	});
})


// append <style> and <div class="loading-container">
window.addEventListener("load", function(){
	var style = document.createElement("style")
	style.innerHTML = style_inner
	document.head.appendChild(style)
	document.body.appendChild(lc)
}, false)


function start(scb){
	lc.style.display = "block"
	cb = scb || function(){}
}

function end(){
	lo.classList.add("loading-end")
}

function animation_end(){
	lo.classList.remove("loading-end")
	lc.style.display = "none"
}

window.loading = {
	start,
	end
}

var cb

}()