AngularX Blurred Image is an Angular component to implement lazy loading of medium images inspired by images with blur effect.
blur page while loading, lazy loading with blurred image effect, blur background while loading css, blurry image loader angular, loadinglazy background image
Simple Loading Page With HTML, CSS, and JavaScript | BluryLoading
How to make use of it:
Installation
npm i ngx-blurred-image
Import module:
import { BlurredImageComponent } from 'ngx-blurred-image/components'; @NgModule({ declarations: [ BlurredImageComponent ] })
<div blurred-image [small]="base64" preview="/assets/img/annie-spratt-419262-preview.jpg" [size]="{width: 880, height: 587}" ></div>
Properties
name | type | description |
---|---|---|
small | string | Thumbnail image in base64 format. |
preview | string | Path to the full-size image. |
size | object | Width and height of the container with the image. |
delay | number | The delay in ms before showing the image. |
Loading Images With Blur Effect, ngx blurred image Plugin/Github, progressive image loading angular, blur up image loading react, progressive image loading js
See Demo And Download
Official Website(drozhzhin-n-e): Click Here
This superior jQuery/javascript plugin is developed by drozhzhin-n-e. For extra advanced usage, please go to the official website.