blurry loading

0%

const load=document.querySelector('.loading-text')
const bg=document.querySelector('.bg')
const scale = (n,inMin,inMax,outerMin,outerMax) => (n - inMin) * (outerMax - outerMin) / (inMax - inMin) + outerMin;
let timer=null
let num=0
let loadingHandle=function(){
    num++
    if(num>99){
        clearTimeout(timer)
    }else{
      timer=setTimeout(loadingHandle,20)
    }
    load.innerHTML=num+'%'
    load.style.opacity = scale(num,0,100,1,0);
    bg.style.filter = `blur(${scale(num,0,100,20,0)}px)`;
}
loadingHandle()