Home CSS & CSS3 How To Load Your Images With A Progressive Effect Using Only CSS

How To Load Your Images With A Progressive Effect Using Only CSS

CSS & CSS3 webcodeflow · February 14, 2022 · Comments off

Pure CSS Image Loader to render your images with gradual blur until the image is fully loaded. You can view this effect applied on Medium or Instagram.

progressive image loading, lazy loading with blurred image effect, progressive image loading css, image loading effects css, image loading placeholder, lazy loading images

A Simple, Lightweight Image Lazy Loader In Pure JavaScript | Simply Lazy

How to make use of it:

Insert your low-quality image as wallpaper on the web page.

<div style="background-image:url(1.jpg);"></div>

Main CSS Styles for a DIV Cover.

div.demo {
  width: 900px;
  height: 650px;
  filter: blur(20px);
  background-size: cover;
  background-color: #a07250;
  animation: hd-quality 1s;
  animation-delay: 3s;
  animation-fill-mode: forwards;
}
div.demo::after {
  animation: low-quality 1s;
  animation-delay: 1s;
}

Enter your high-quality image as follows:

@keyframes 
  low-quality {  0% {
   background-image: url(low.jpg);
  }
}
@keyframes 
  hd-quality {  0% {
   background-image: url(hd.jpg);
   filter: blur(20px);
  }
   100% {
   background-image: url(hd.jpg);
   filter: blur(0px);
  }
}

Progressive Image Loading Effect, Pure CSS Image Loader Plugin/Github, lazy load images example, loading lazy background image