Image Loading Blur Effect In JavaScript And CSS

Category: Javascript , Loading | April 12, 2022
Author:maykaltenev
Views Total:98 views
Official Page:Go to website
Last Update:April 12, 2022
License:MIT

Preview:

Image Loading Blur Effect In JavaScript And CSS

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;
}

You Might Be Interested In:


Leave a Reply