LDRS Loaders Studio

Modern minimalist loaders as web components, previewed live.

LDRS Loaders Studio — preview all 44 minimalist LDRS loaders live, tune size, colour and speed, then copy the code below

How to use LDRS Loaders Studio

  1. Browse all 44 LDRS loaders with their real markup and animation CSS, playing live.
  2. Search by tag or name, and tune size, speed and colour with the controls.
  3. Click a loader to see it large with its default size, speed and other props.
  4. Copy the real web-component usage for the selected loader, or copy the install command.
  5. Paste it into any app: import the loader, call register(), then use the <l-*> element.

Features

  • All 44 real loaders from the LDRS repo: ring, tailspin, infinity, quantum and more
  • Each preview uses the loader's own template markup and animation CSS
  • Size, speed and colour controls plus play/pause for every loader
  • One-click usage code with the exact import, register() call and <l-*> tag
  • Works in React, Vue, Svelte and plain HTML, as in the original library
  • Runs fully offline in your browser: no API keys, no sign-up

Frequently asked questions

Is it free?

Yes, unlimited.

Login to use this free online tool. Create a free account to get started.