Progressive Image Loading Effect In Pure CSS

Preview:

Description:

A pure CSS image loader to simulate the progressive image loading with a blur effect as you seen on Instagram and Medium.com.

See also:

• JavaScript Library For Progressive Image Loading Effect – Interlace.js
• Progressive Image Loading Library – Antimoderate.js
• Medium-style Image Loading Effect – pilpil

How to use it:

Insert your low quality image as a background into the webpage.

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

The main CSS styles for the DIV wrapper.

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

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