Zach’s ugly mug (his face) Zach Leatherman

<throb-ber> Web Component

Cursive neon sign says Waiting waiting waiting waiting
February 19, 2024

<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.

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>

IndieWeb Avatar for https://unsplash.com/Poster image by Levi Meir Clancy

< Newer
webcare-webshare Web Component
Older >
Lessons learned moving Eleventy from CommonJS to ESM

Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web at IndieWeb Avatar for https://cloudcannon.com/CloudCannon. He is the creator and maintainer of IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 79 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

6 Reposts

IndieWeb Avatar for https://www.alvinashcraft.comConor C. Peterson :kirby_fly:Mike-麥-Mai-v1.618 ????Hasan AliFynn BeckerChris Burnell

16 Likes

Conor C. Peterson :kirby_fly:Eric WallaceChrisMike-麥-Mai-v1.618 ????Scott MartinFynn BeckerHasan AliStezAriel SalminenEric PortisSimon Cox :SEO:Matt SteinChris BurnellAshur CabreraTyler StickaChris Coleman
3 Comments
  1. Zach Leatherman :verify:

    Zach Leatherman :verify:

    This is the first of a few new web components I made for the @eleventy conference registration web site—more to come!

  2. Tom Streeter

    Tom Streeter

    @zaCHlEat I HaVe No lEGiTimate USE fOr ThIS, Yet there’S A 12-yEar-Old InSIDE me ThAt dESpEraTeLY Wants TO UsE it In a pROjEct.

  3. Zach Leatherman :verify:

    Zach Leatherman :verify:

    @Tom_StREETeR if thERe WerE EVeR a Time fOr iLlegITimATe weB COMPOneNt uSAGe…

Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)