Simulate A Page Loader With A Blur Effect – Blury-Loading

Preview:

Description:

A tiny script to simulate a loading screen that blurs the background until the loading countdown is finished.

How to use it:

1. Create a container to hold the loading text.

<h1 class="loading-text">0%</h1>

.loading-text{
  font-size:60px;
  color:white;
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
}

2. The main JavaScript to enable the page loader.

const loadingText = document.querySelector('.loading-text')
const bgSection = document.querySelector('.anyContent')
let loading = 0
let interVal = setInterval(() => {
    loading++
    if(loading > 99){
        clearInterval(interVal)
    }
    loadingText.innerText = `${loading}%`
    loadingText.style.opacity = scale(loading,0,100,1,0)
    bgSection.style.filter = `blur(${scale(loading,0,100,30,0)}px)`
},50)
const scale = (num,in_min,in_max,out_min,out_max) => {
    return ( (num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min
}