Skip to content

Instantly share code, notes, and snippets.

@nexpr
Last active January 15, 2016 13:13
Show Gist options
  • Save nexpr/8440fc08d3c813e60602 to your computer and use it in GitHub Desktop.
Save nexpr/8440fc08d3c813e60602 to your computer and use it in GitHub Desktop.
ローディング画面
!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
}()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment