https://github.com/zachleat/throbber
A loading indicator overlay for images (and maybe other things later).
https://github.com/zachleat/throbber
Last synced: about 1 year ago
JSON representation
A loading indicator overlay for images (and maybe other things later).
- Host: GitHub
- URL: https://github.com/zachleat/throbber
- Owner: zachleat
- License: mit
- Created: 2024-02-15T18:35:24.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-19T23:40:57.000Z (over 2 years ago)
- Last Synced: 2025-04-19T15:35:37.904Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://zachleat.github.io/throbber/demo.html
- Size: 14.6 KB
- Stars: 16
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# `` Web Component
A web component to add a little baby rainbow gradient overlay until all of the images nested inside have finished loading. Works best with expensive dynamically generated images (like screenshots).
* [Demos](https://zachleat.github.io/throbber/demo.html)
* Used on the registration flow for [`conf.11ty.dev`](https://conf.11ty.dev/)
## Features
* Customize minimum `delay` before the loading indicator is shown.
* Customize loading indicator bar height.
## Installation
You can install via `npm` ([`@zachleat/throbber`](https://www.npmjs.com/package/@zachleat/throbber)) or download the `throbber.js` JavaScript file manually.
```shell
npm install @zachleat/throbber --save
```
Add `throbber.js` to your site’s JavaScript assets.
## Usage
```html
```
### Change minimum delay
The minimum time before the loading indicator is shown. `delay` is in milliseconds (0.5 seconds shown).
```html
```
### Customize appearance
Dark background while the image is loading, loading indicator fills up the component:
```html
```
Use your own custom gradient:
```html
```