Minimalist loading animations for React and web components
npm install ldrsLightweight 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.
NPM
``jsx`
npm install ldrs
Yarn
`jsx`
yarn add ldrs
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 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 (
Frameworks
Web components can only be run in a client-side environment, so they need to be excluded from SSR.
š Nuxt.js guide ā
š Astro guide ā
Options
_Each loader has different defaults. You can see them on the website. Click on an individual loader and open the "source" sidebar._
$3
The size of the loader. Specifically, this defines the largest dimension (height or width) in pixels.
`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
``MIT