-
Notifications
You must be signed in to change notification settings - Fork 1
/
vanilla-js-pages-transition-loader.min.js
1 lines (1 loc) · 1.31 KB
/
vanilla-js-pages-transition-loader.min.js
1
let e={backgroundColor:"#2774ab",filterBrightness:2,strokeWidth:10,timeOnScreen:100},t=document.querySelector("*"),r=document.createElement("style"),i=document.createElement("div"),s="http://www.w3.org/2000/svg",n=document.createElementNS(s,"svg"),o=document.createElementNS(s,"circle");document.head.appendChild(r),r.innerHTML="@keyframes swell{to{transform:rotate(360deg)}}",i.setAttribute("style","background-color:"+e.backgroundColor+";color:"+e.backgroundColor+";display:flex;align-items:center;justify-content:center;position:fixed;top:0;height:100vh;width:100vw;z-index:2147483647"),document.body.setAttribute("style","overflow:hidden!important;"),document.body.prepend(i),n.setAttribute("style","height:50px;filter:brightness("+e.filterBrightness+");animation:.3s swell infinite linear"),n.setAttribute("viewBox","0 0 100 100"),i.prepend(n),o.setAttribute("cx","50"),o.setAttribute("cy","50"),o.setAttribute("r","35"),o.setAttribute("fill","none"),o.setAttribute("stroke","currentColor"),o.setAttribute("stroke-dasharray","165 57"),o.setAttribute("stroke-width",e.strokeWidth),n.prepend(o),t.style.pointerEvents="none",t.style.userSelect="none",t.style.cursor="wait",window.onload=()=>{setTimeout(()=>{t.style.pointerEvents="",t.style.userSelect="",t.style.cursor="",i.remove(),document.body.setAttribute("style","")},e.timeOnScreen)}