@creaditor/cdtr-loader

Embeddable <cdtr-loader> web component. A purely decorative loading animation themed around building a newsletter: a cursor drags a fresh block onto the page, grabs the edge handles to resize it, then drops in a photo — before the whole thing resets and loops. Drop it wherever you'd otherwise show a spinner.

Built with Lit. The entire animation is pure CSS keyframes — there's no JS animation loop, so it's GPU-friendly and cheap. It auto-plays, takes no interaction, and honors prefers-reduced-motion.

Install

npm install @creaditor/cdtr-loader

Use

As an ES module

<cdtr-loader size="400"></cdtr-loader>

<script type="module">
  import '@creaditor/cdtr-loader';
</script>

Importing the package registers the <cdtr-loader> custom element as a side effect. You can also import the class directly:

import { CdtrLoader } from '@creaditor/cdtr-loader';

Via CDN (UMD)

<script src="https://unpkg.com/@creaditor/cdtr-loader"></script>
<cdtr-loader size="240"></cdtr-loader>

Attributes

| Attribute | Type | Default | Description | | --------- | ------ | ------- | --------------------------------------------- | | size | number | 400 | Width and height of the loader, in pixels. |

size can also be set as a property (el.size = 240).

Styling

The loader is themed entirely through CSS custom properties, so it drops into light or dark surfaces without touching the markup. Set them on the element (or any ancestor):

cdtr-loader {
  --cdtr-lo-size: 400px;         /* same as the size attribute */
  --cdtr-lo-bg: transparent;     /* stage background */
  --cdtr-lo-card-bg: #ffffff;    /* the "page" being built */
  --cdtr-lo-card-border: #e5e7eb;
  --cdtr-lo-block-bg: #eef2ff;   /* newsletter blocks */
  --cdtr-lo-block-bg-2: #e0e7ff;
  --cdtr-lo-accent: #7c3aed;     /* cursor accents, handles, drop line */
  --cdtr-lo-accent-2: #ec4899;
  --cdtr-lo-accent-soft: #ede9fe;
  --cdtr-lo-cursor: #1f2937;     /* cursor fill */
  --cdtr-lo-radius: 18px;
  --cdtr-lo-duration: 15s;       /* full loop length */
  --cdtr-lo-image-url: url('https://picsum.photos/seed/cdtr-loader/600/360');
}

Override --cdtr-lo-image-url to swap the photo that gets "dropped" onto the page, and --cdtr-lo-duration to speed up or slow down the loop. The dark theme in index.html shows a full override set in context.

Accessibility

The loader renders with role="status" and aria-live="polite" (labelled "Loading"). Under prefers-reduced-motion: reduce the animation is disabled and a static, fully-built newsletter is shown instead. It also forces LTR internally, so it renders identically inside RTL hosts.

License

MIT