Image Loading Blur Effect In JavaScript And CSS

Preview:

Description:

A loading indicator that adds a beautiful image loading blur effect to your site. Kind of like Medium.com’s image lazy loading animation.

Its purpose is to give you an alternative to loading animations. Note that this is just a FAKE loading indicator and does not indicate the actual loading progress of the page content.

How to use it:

1. Add a background image to the page and set the radius of the blur to 0.

<section class="bg"></section>

.bg {
  background: url("bg.jpg") no-repeat center/cover;
  position: absolute;
  top: -60px;
  left: -60px;
  width: calc(100vw + 60px);
  height: calc(100vw + 60px);
  z-index: -1;
  filter: blur(0px);
}

2. Add loading text onto the background image.

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

3. The JavaScript to enable the image loading blur effect on page load.

const loadText = document.querySelector('.loading-text');
const bg = document.querySelector('.bg');
let load = 0;
let int = setInterval(blurring, 30);
function blurring() {
    load++
    if (load > 99) {
      clearInterval(int);
    }
    loadText.innerText = `${load}%`;
    loadText.style.opacity = scale(load, 0, 100, 1, 0);
    bg.style.filter = `blur(${scale(load, 0, 100, 30, 0)}px)`;
}
function scale(number, inMin, inMax, outMin, outMax) {
  return (number - inMin) * (outMax - outMin) / (inMax - inMin) + outMin;
}