width="100%"
height="auto">

LDRS

Lightweight loaders & spinners for your next web project. Available as Web and React components.

- 44 types : Unique enough to be interesting; simple enough to use in real-world projects
- Universal : Use with React, Vue, Svelte, Solid, plain HTML...
- Customizable : Set the size, color, stroke width, and animation speed to match your design
- Tiny : No frameworks. No bloat. Dues-paying member of the iddy biddy bundle committee
- Vanilla : Only want the HTML & CSS? Just select a loader on the website and go to Source -> HTML & CSS
- Typed : No one likes a squiggly red underline
- No gifs : Built with HTML, CSS and some lightweight SVG
- Zero dependencies : Zero worries

➠ Visit the 🌐 Website to see them all in action.

Installation

NPM

``jsx
npm install ldrs
`

Yarn

`jsx
yarn add ldrs
`

React

React exports have been added to LDRS as of v1.1.3. They can be imported from ldrs/react and use PascalCase. Attributes are identical to the web components except they are snakeCase. When using the React components, CSS must be imported separately from ldrs/react/[ComponentName].css

`jsx
import { Ring } from 'ldrs/react'
import 'ldrs/react/Ring.css'


`

Web Components

Web components need to be registered or "defined" to work. Until registration they're just empty HTML elements that don't do anything. For convenience, LDRS come in two varieties: auto-defining and manually defined. Auto-defining elements are released as individual .js files that register themselves on import. Manually defined elements are named exports that come with a register() method.

The full list of loaders can be found on the website.

`js
// Auto-defining
import 'ldrs/ring'

// Manually defined
import { ring } from 'ldrs'
ring.register()
`

You can rename your loader by passing a string to the register() method. Note that custom element names must contain a dash -.

`js
import { ring } from 'ldrs'
ring.register('my-precious')
`

`html

`

Here's a very simple example of using an auto-defining loader in a client-rendered React SPA:

`jsx
import 'ldrs/helix'

export default function PageSection({ isLoading }) {
return (


`jsx

`

$3

Any valid CSS color value is accepted, so #000000, red, hsla(13, 68%, 63%, .7), and var(--my-custom-color) are all a-okay.

`jsx

`

$3

The speed of the animation. Each loader uses this number a little differently (individual parts of a given loader might have different timings), but in general this number represents the duration of a single full animation loop in seconds, so smaller = faster. If you set speed to 0 or Infinity it will pause the animation.

`jsx

`

$3

The width / stroke in pixels of line-based loaders like or .

`jsx

`

$3

The length of the animated element of track-based loaders like or . Expressed as a fraction of total. Accepts a value from 0 to 1 (for example .1 or 0.14159).

`jsx

`

$3

The opacity of background elements in loaders like or . Accepts a value from 0 to 1 (for example .1 or 0.618).

`jsx

``

License

MIT