Angular Loading Images With Blur Effect Component Library

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

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

nametypedescription
smallstringThumbnail image in base64 format.
previewstringPath to the full-size image.
sizeobjectWidth and height of the container with the image.
delaynumberThe 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.

Share