modern-loaders 1.2.1 → 1.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +110 -27
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,34 +1,76 @@
|
|
|
1
1
|
<div align="center">
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
<h1>modern-loaders</h1>
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
<p><b>212 ready-made loading animations for React.</b><br/>
|
|
6
|
+
One component, pure CSS motion, zero runtime dependencies.</p>
|
|
6
7
|
|
|
7
|
-
|
|
8
|
+
[](https://www.npmjs.com/package/modern-loaders)
|
|
9
|
+
[](https://www.npmjs.com/package/modern-loaders)
|
|
10
|
+
[](https://bundlephobia.com/package/modern-loaders)
|
|
11
|
+
[](https://www.npmjs.com/package/modern-loaders)
|
|
12
|
+
[](./LICENSE)
|
|
13
|
+
[](https://github.com/Suman1999-hub/modern-loaders-package)
|
|
8
14
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
[](./LICENSE)
|
|
13
|
-
[](https://modern-loaders.netlify.app/)
|
|
14
|
-
|
|
15
|
-
### [**→ Browse all 212 loaders live**](https://modern-loaders.netlify.app/)
|
|
15
|
+
```bash
|
|
16
|
+
npm install modern-loaders
|
|
17
|
+
```
|
|
16
18
|
|
|
17
|
-
|
|
19
|
+
[](https://modern-loaders.netlify.app/)
|
|
18
20
|
|
|
19
21
|
</div>
|
|
20
22
|
|
|
21
23
|
---
|
|
22
24
|
|
|
25
|
+
## What is modern-loaders?
|
|
26
|
+
|
|
27
|
+
A library of **212 loading animations** for React, all behind a single `<Loader />` component.
|
|
28
|
+
|
|
29
|
+
**The problem.** Every app needs loading states. Building them by hand means writing CSS keyframes
|
|
30
|
+
again and again. Most loader packages give you a handful of spinners, or pull in a JavaScript
|
|
31
|
+
animation runtime you did not ask for.
|
|
32
|
+
|
|
33
|
+
**This package.** Pick a loader by name, set the size, speed and colours if you want, and ship.
|
|
34
|
+
Every animation is plain CSS, so nothing runs on the main thread and there is nothing to install
|
|
35
|
+
alongside it.
|
|
36
|
+
|
|
37
|
+
### Why developers use it
|
|
38
|
+
|
|
39
|
+
- **212 variants across 20 families** — spinners, dots, bars, shapes, progress, grids, pulses, organic, skeletons, dimensional, neon, liquid, glitch, particles, futuristic, elastic, minimal, gradient, kinetic, and premium.
|
|
40
|
+
- **Three props to learn.** `size`, `speed`, `colors`. Everything else has a sensible default.
|
|
41
|
+
- **Zero dependencies.** ~4 kB of JS. All motion is CSS keyframes — no rAF loop, no JS on the animation path.
|
|
42
|
+
- **Fully typed.** `variant` autocompletes every id, and a typo is a compile error.
|
|
43
|
+
- **Accessible by default.** Each loader is a labelled `role="status"` and honours `prefers-reduced-motion`.
|
|
44
|
+
- **Themeable without a build step.** Every value is a CSS custom property you can override.
|
|
45
|
+
|
|
46
|
+
---
|
|
47
|
+
|
|
48
|
+
## Quick Start
|
|
49
|
+
|
|
50
|
+
### 1. Install
|
|
51
|
+
|
|
23
52
|
```bash
|
|
24
|
-
npm
|
|
53
|
+
npm install modern-loaders
|
|
25
54
|
```
|
|
26
55
|
|
|
56
|
+
<details>
|
|
57
|
+
<summary>Using yarn or pnpm?</summary>
|
|
58
|
+
|
|
59
|
+
```bash
|
|
60
|
+
yarn add modern-loaders
|
|
61
|
+
pnpm add modern-loaders
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
</details>
|
|
65
|
+
|
|
66
|
+
### 2. Add a loader
|
|
67
|
+
|
|
27
68
|
```tsx
|
|
28
69
|
import { Loader } from "modern-loaders";
|
|
29
70
|
|
|
30
|
-
|
|
31
|
-
<Loader
|
|
71
|
+
export default function App() {
|
|
72
|
+
return <Loader />;
|
|
73
|
+
}
|
|
32
74
|
```
|
|
33
75
|
|
|
34
76
|
That is the whole setup. **The stylesheet is bundled and injects itself** — no CSS import to
|
|
@@ -36,18 +78,35 @@ remember, nothing to configure in Vite, Next.js, CRA, or Tailwind.
|
|
|
36
78
|
|
|
37
79
|
<sub>If your bundler strips side-effect imports, add <code>import "modern-loaders/styles.css"</code>.</sub>
|
|
38
80
|
|
|
39
|
-
|
|
81
|
+
### 3. Make it yours
|
|
40
82
|
|
|
41
|
-
|
|
42
|
-
- **Three props to learn.** `size`, `speed`, `colors`. Everything else has a sensible default.
|
|
43
|
-
- **Zero dependencies.** ~4 kB of JS. All motion is CSS keyframes — no rAF loop, no JS on the animation path.
|
|
44
|
-
- **Fully typed.** `variant` autocompletes every id, and a typo is a compile error.
|
|
45
|
-
- **Accessible by default.** Each loader is a labelled `role="status"` and honours `prefers-reduced-motion`.
|
|
46
|
-
- **Themeable without a build step.** Every value is a CSS custom property you can override.
|
|
83
|
+
Choose a variant by name, then tune the size, speed and colours:
|
|
47
84
|
|
|
48
|
-
|
|
85
|
+
```tsx
|
|
86
|
+
<Loader variant="wave" size={72} speed={0.8} colors={["#f97316", "#ef4444", "#a855f7"]} />
|
|
87
|
+
```
|
|
49
88
|
|
|
50
|
-
|
|
89
|
+
Not sure which one to pick? [**Browse all 212 in the live gallery →**](https://modern-loaders.netlify.app/)
|
|
90
|
+
|
|
91
|
+
---
|
|
92
|
+
|
|
93
|
+
## Contents
|
|
94
|
+
|
|
95
|
+
- [Props](#props)
|
|
96
|
+
- [Which loader should I use?](#which-loader-should-i-use)
|
|
97
|
+
- [Recipes](#recipes)
|
|
98
|
+
- [All 212 variants](#all-212-variants)
|
|
99
|
+
- [Theming](#theming)
|
|
100
|
+
- [Accessibility](#accessibility)
|
|
101
|
+
- [Bundle size](#bundle-size)
|
|
102
|
+
- [Named exports](#named-exports)
|
|
103
|
+
- [Browser support](#browser-support)
|
|
104
|
+
- [Development](#development)
|
|
105
|
+
- [License](#license)
|
|
106
|
+
|
|
107
|
+
---
|
|
108
|
+
|
|
109
|
+
## Props
|
|
51
110
|
|
|
52
111
|
| prop | type | default | description |
|
|
53
112
|
|---|---|---|---|
|
|
@@ -59,7 +118,9 @@ remember, nothing to configure in Vite, Next.js, CRA, or Tailwind.
|
|
|
59
118
|
|
|
60
119
|
Every other `div` prop — `className`, `style`, `id`, `onClick`, `data-*` — passes straight through.
|
|
61
120
|
|
|
62
|
-
|
|
121
|
+
---
|
|
122
|
+
|
|
123
|
+
## Which loader should I use?
|
|
63
124
|
|
|
64
125
|
| situation | reach for | why |
|
|
65
126
|
|---|---|---|
|
|
@@ -73,7 +134,9 @@ Every other `div` prop — `className`, `style`, `id`, `onClick`, `data-*` — p
|
|
|
73
134
|
| Games, launch screens, dev tools | **Neon**, **Futuristic**, **Glitch** | Loud on purpose. Best on a dark surface. |
|
|
74
135
|
| Playful or brand-forward moments | **Liquid**, **Particles**, **Elastic**, **Kinetic** | Physical motion people actually watch. |
|
|
75
136
|
|
|
76
|
-
|
|
137
|
+
---
|
|
138
|
+
|
|
139
|
+
## Recipes
|
|
77
140
|
|
|
78
141
|
**A button that keeps its width while loading**
|
|
79
142
|
|
|
@@ -111,11 +174,13 @@ VARIANTS.filter(v => v.group === "Skeletons")
|
|
|
111
174
|
.map(v => <Loader key={v.id} variant={v.id} />);
|
|
112
175
|
```
|
|
113
176
|
|
|
177
|
+
---
|
|
178
|
+
|
|
114
179
|
## All 212 variants
|
|
115
180
|
|
|
116
181
|
Every id maps to a `.ldr--<id>` CSS class. The tables below are the full reference; to *see* them
|
|
117
|
-
moving, use the [live gallery](https://modern-loaders.netlify.app/) — it renders every variant with
|
|
118
|
-
|
|
182
|
+
moving, use the [live gallery](https://modern-loaders.netlify.app/) — it renders every variant with your own size, speed, and
|
|
183
|
+
colours, and copies the JSX for you.
|
|
119
184
|
|
|
120
185
|
<details>
|
|
121
186
|
<summary><b>Spinners</b> · 10 — Rings and arcs — the classic shape, modernised.</summary>
|
|
@@ -489,6 +554,8 @@ your own size, speed, and colours, and copies the JSX for you.
|
|
|
489
554
|
|
|
490
555
|
</details>
|
|
491
556
|
|
|
557
|
+
---
|
|
558
|
+
|
|
492
559
|
## Theming
|
|
493
560
|
|
|
494
561
|
The `colors` prop covers most cases. For anything else, override the custom properties — they
|
|
@@ -509,6 +576,8 @@ cascade, so one rule themes a whole subtree:
|
|
|
509
576
|
|
|
510
577
|
`--track` and `--grad` derive from `--c1`–`--c3` automatically; set them directly for finer control.
|
|
511
578
|
|
|
579
|
+
---
|
|
580
|
+
|
|
512
581
|
## Accessibility
|
|
513
582
|
|
|
514
583
|
- Each loader renders as `role="status"` with `aria-label`, so assistive tech announces it once.
|
|
@@ -517,6 +586,8 @@ cascade, so one rule themes a whole subtree:
|
|
|
517
586
|
- Under `prefers-reduced-motion: reduce`, every animation slows to a single calm 4s linear cycle
|
|
518
587
|
rather than stopping. A frozen loader reads as a crashed app, which is worse than gentle motion.
|
|
519
588
|
|
|
589
|
+
---
|
|
590
|
+
|
|
520
591
|
## Bundle size
|
|
521
592
|
|
|
522
593
|
| | raw | gzipped |
|
|
@@ -531,6 +602,8 @@ every kilobyte counts, copy the specific `.ldr--*` blocks out of [`src/styles/`]
|
|
|
531
602
|
into your own CSS and skip the package — each block is self-contained apart from the shared
|
|
532
603
|
keyframes in [`00-base.css`](./src/styles/00-base.css).
|
|
533
604
|
|
|
605
|
+
---
|
|
606
|
+
|
|
534
607
|
## Named exports
|
|
535
608
|
|
|
536
609
|
`Loader` is the main export. The original ten also have wrappers, kept for backward compatibility
|
|
@@ -543,6 +616,8 @@ import { Aurora, Orbit, Rings, Wave, Bars, Blob, Cube, Spiral, Bar, Grid } from
|
|
|
543
616
|
Everything else is reached with `<Loader variant="…" />`. Two hundred named exports would bloat
|
|
544
617
|
the API surface for no real gain, and `variant` autocompletes just as well.
|
|
545
618
|
|
|
619
|
+
---
|
|
620
|
+
|
|
546
621
|
## Browser support
|
|
547
622
|
|
|
548
623
|
Chrome 111+ · Safari 16.4+ · Firefox 113+ — the floor is set by `color-mix()`, alongside `mask`,
|
|
@@ -553,6 +628,8 @@ Five variants — `neon-arc`, `pie`, `progress-ring`, `gradient-border`, `color-
|
|
|
553
628
|
registered custom property via `@property` (Firefox 128+). Every use passes a fallback, so below
|
|
554
629
|
that they render a sensible static frame instead of disappearing.
|
|
555
630
|
|
|
631
|
+
---
|
|
632
|
+
|
|
556
633
|
## Development
|
|
557
634
|
|
|
558
635
|
```bash
|
|
@@ -570,6 +647,12 @@ Two rules keep the motion composable inside a variant: put a whole radial chain
|
|
|
570
647
|
and reach for the standalone `translate` / `rotate` / `scale` properties when an element already
|
|
571
648
|
animates `transform` — they compose instead of overwriting it.
|
|
572
649
|
|
|
650
|
+
---
|
|
651
|
+
|
|
573
652
|
## License
|
|
574
653
|
|
|
575
654
|
ISC © suman
|
|
655
|
+
|
|
656
|
+
<div align="center">
|
|
657
|
+
<sub><a href="https://modern-loaders.netlify.app/">Live gallery</a> · <a href="https://www.npmjs.com/package/modern-loaders">npm</a> · <a href="https://github.com/Suman1999-hub/modern-loaders-package">GitHub</a></sub>
|
|
658
|
+
</div>
|
package/package.json
CHANGED