blur-progressive-image

Progressive Image Loader as a Web Component

Usage no npm install needed!

<script type="module">
  import blurProgressiveImage from 'https://cdn.skypack.dev/blur-progressive-image';
</script>

README

Progressive Image

DESC

NPM

DOWNLAOD

SIZE

BUILD

NOTE: This is in alpha stage right, this is not ready for prod in any way.

Checkout Demo: https://progressive-image.codekart.dev

Install

Use NPM or Github Registry to install blur-progressive-image.

# With NPM
npm install blur-progressive-image

# With Yarn
yarn add blur-progressive-image

Alternative, you can use direct link from this repo

https://github.com/reezpatel/progressive-image/releases/download/v0.0.6/progressive-image.js

Or CDN,

https://cdn.jsdelivr.net/npm/blur-progressive-image/dist/progressive-image.js

Usage

Since it is a web-component it is compatible with any frontend framework like React, Angular, Vue etc.

  1. To start with, add the script in root html to load web component.
<head>
  <meta charset="UTF-8" />
  <script src="~/node_modules/blur-progressive-image"></script>
</head>
  1. Use the web-component in the desired place
<progressive-image
  src="https://link.to/original/image"
  thumbnail="https://link.to/full/image"
/>

Properties

Property Description Default
src Full size image source ""
thumbnail Thumbnail of image ""
blur Blur Amount 12