Progressive Image Loading Effect In Pure CSS

Category: CSS & CSS3 , Image , Loading | September 22, 2016
Author: jbrizio
Views Total: 6,130 views
Official Page: Go to website
Last Update: September 22, 2016
License: MIT

Preview:

Progressive Image Loading Effect In Pure CSS

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:

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

You Might Be Interested In:


Leave a Reply