<throb-ber> Web Component

<throb-ber> is a web component to add a little baby rainbow gradient overlay that shows until all of the images nested inside have finished loading.

• Demo
• Source code on GitHub

Works best with expensive dynamically generated images (like from the Eleventy Image Screenshot API). Used on the registration flow for conf.11ty.dev.

Features

• Custom minimum delay before the loading indicator is shown.
• Custom loading indicator bar height.
• Custom loading indicator gradient.

Installation

You can install via npm (@zachleat/throbber) or download the throbber.js JavaScript file manually.

npm install @zachleat/throbber --save

Add throbber.js to your site’s JavaScript assets.

Usage

<throb-ber>
	<img src="myimage.png" alt="" width="600" height="400">
</throb-ber>

Change minimum delay

The minimum time before the loading indicator is shown. delay is in milliseconds (0.5 seconds shown).

<throb-ber delay="500">
	<img src="myimage.png" alt="" width="600" height="400">
</throb-ber>

Customize appearance

Dark background while the image is loading, loading indicator fills up the component:

<throb-ber style="background-color: #666; --throbber-height: 100%;">
	<img src="myimage.png" alt="" width="600" height="400">
</throb-ber>

Use your own custom gradient:

<throb-ber style="--throbber-image: linear-gradient(to right, white, rebeccapurple); --throbber-opacity: 1">
	<img src="myimage.png" alt="" width="600" height="400">
</throb-ber>