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

pure-css-lazy-image-loader

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

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


See Demo And Download

Official Website(jbrizio): Click Here

This superior jQuery/javascript plugin is developed by jbrizio. For extra Advanced Usages, please go to the official website.