Progressive Image
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-imageAlternative, 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.
- 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>- 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 |