Author: | jbrizio |
---|---|
Views Total: | 9,101 views |
Official Page: | Go to website |
Last Update: | September 22, 2016 |
License: | MIT |
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); } }