https://github.com/seanwuapps/bl-img

Blur-load image web component
https://github.com/seanwuapps/bl-img

Last synced: about 2 months ago
JSON representation

Blur-load image web component

• Host: GitHub
• URL: https://github.com/seanwuapps/bl-img
• Owner: seanwuapps
• License: mit
• Created: 2017-10-07T06:37:26.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2017-10-15T22:29:44.000Z (about 7 years ago)
• Last Synced: 2024-10-04T10:07:10.594Z (3 months ago)
• Language: TypeScript
• Size: 409 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

README

        

#bl-img

Progressviely load an image with blur effect.

`` is a web component that loads a thumbnail image first with blur effect, then loads the HD image in the background, after HD image is loaded it appears with removal of the blur effect.

## Usage

install this web component from npm

```bash

npm install bl-img --save

```

then insert script tag

```html

```

or use unpkg CDN

```html

```

after this you should be able to use it like any other html tags

```html

    

      .image {

        width: 400px;

        max-height: 400px;

      }

    

    

```