modern-loaders 1.2.0 → 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 +113 -23
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -1,29 +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
|
-
|
|
15
|
+
```bash
|
|
16
|
+
npm install modern-loaders
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
[](https://modern-loaders.netlify.app/)
|
|
13
20
|
|
|
14
21
|
</div>
|
|
15
22
|
|
|
16
23
|
---
|
|
17
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
|
+
|
|
18
52
|
```bash
|
|
19
|
-
npm
|
|
53
|
+
npm install modern-loaders
|
|
20
54
|
```
|
|
21
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
|
+
|
|
22
68
|
```tsx
|
|
23
69
|
import { Loader } from "modern-loaders";
|
|
24
70
|
|
|
25
|
-
|
|
26
|
-
<Loader
|
|
71
|
+
export default function App() {
|
|
72
|
+
return <Loader />;
|
|
73
|
+
}
|
|
27
74
|
```
|
|
28
75
|
|
|
29
76
|
That is the whole setup. **The stylesheet is bundled and injects itself** — no CSS import to
|
|
@@ -31,18 +78,35 @@ remember, nothing to configure in Vite, Next.js, CRA, or Tailwind.
|
|
|
31
78
|
|
|
32
79
|
<sub>If your bundler strips side-effect imports, add <code>import "modern-loaders/styles.css"</code>.</sub>
|
|
33
80
|
|
|
34
|
-
|
|
81
|
+
### 3. Make it yours
|
|
35
82
|
|
|
36
|
-
|
|
37
|
-
- **Three props to learn.** `size`, `speed`, `colors`. Everything else has a sensible default.
|
|
38
|
-
- **Zero dependencies.** ~4 kB of JS. All motion is CSS keyframes — no rAF loop, no JS on the animation path.
|
|
39
|
-
- **Fully typed.** `variant` autocompletes every id, and a typo is a compile error.
|
|
40
|
-
- **Accessible by default.** Each loader is a labelled `role="status"` and honours `prefers-reduced-motion`.
|
|
41
|
-
- **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:
|
|
42
84
|
|
|
43
|
-
|
|
85
|
+
```tsx
|
|
86
|
+
<Loader variant="wave" size={72} speed={0.8} colors={["#f97316", "#ef4444", "#a855f7"]} />
|
|
87
|
+
```
|
|
44
88
|
|
|
45
|
-
|
|
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
|
|
46
110
|
|
|
47
111
|
| prop | type | default | description |
|
|
48
112
|
|---|---|---|---|
|
|
@@ -54,7 +118,9 @@ remember, nothing to configure in Vite, Next.js, CRA, or Tailwind.
|
|
|
54
118
|
|
|
55
119
|
Every other `div` prop — `className`, `style`, `id`, `onClick`, `data-*` — passes straight through.
|
|
56
120
|
|
|
57
|
-
|
|
121
|
+
---
|
|
122
|
+
|
|
123
|
+
## Which loader should I use?
|
|
58
124
|
|
|
59
125
|
| situation | reach for | why |
|
|
60
126
|
|---|---|---|
|
|
@@ -68,7 +134,9 @@ Every other `div` prop — `className`, `style`, `id`, `onClick`, `data-*` — p
|
|
|
68
134
|
| Games, launch screens, dev tools | **Neon**, **Futuristic**, **Glitch** | Loud on purpose. Best on a dark surface. |
|
|
69
135
|
| Playful or brand-forward moments | **Liquid**, **Particles**, **Elastic**, **Kinetic** | Physical motion people actually watch. |
|
|
70
136
|
|
|
71
|
-
|
|
137
|
+
---
|
|
138
|
+
|
|
139
|
+
## Recipes
|
|
72
140
|
|
|
73
141
|
**A button that keeps its width while loading**
|
|
74
142
|
|
|
@@ -106,9 +174,13 @@ VARIANTS.filter(v => v.group === "Skeletons")
|
|
|
106
174
|
.map(v => <Loader key={v.id} variant={v.id} />);
|
|
107
175
|
```
|
|
108
176
|
|
|
177
|
+
---
|
|
178
|
+
|
|
109
179
|
## All 212 variants
|
|
110
180
|
|
|
111
|
-
|
|
181
|
+
Every id maps to a `.ldr--<id>` CSS class. The tables below are the full reference; to *see* them
|
|
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.
|
|
112
184
|
|
|
113
185
|
<details>
|
|
114
186
|
<summary><b>Spinners</b> · 10 — Rings and arcs — the classic shape, modernised.</summary>
|
|
@@ -482,6 +554,8 @@ Expand a family to see its variants. Every id maps to a `.ldr--<id>` CSS class.
|
|
|
482
554
|
|
|
483
555
|
</details>
|
|
484
556
|
|
|
557
|
+
---
|
|
558
|
+
|
|
485
559
|
## Theming
|
|
486
560
|
|
|
487
561
|
The `colors` prop covers most cases. For anything else, override the custom properties — they
|
|
@@ -502,6 +576,8 @@ cascade, so one rule themes a whole subtree:
|
|
|
502
576
|
|
|
503
577
|
`--track` and `--grad` derive from `--c1`–`--c3` automatically; set them directly for finer control.
|
|
504
578
|
|
|
579
|
+
---
|
|
580
|
+
|
|
505
581
|
## Accessibility
|
|
506
582
|
|
|
507
583
|
- Each loader renders as `role="status"` with `aria-label`, so assistive tech announces it once.
|
|
@@ -510,6 +586,8 @@ cascade, so one rule themes a whole subtree:
|
|
|
510
586
|
- Under `prefers-reduced-motion: reduce`, every animation slows to a single calm 4s linear cycle
|
|
511
587
|
rather than stopping. A frozen loader reads as a crashed app, which is worse than gentle motion.
|
|
512
588
|
|
|
589
|
+
---
|
|
590
|
+
|
|
513
591
|
## Bundle size
|
|
514
592
|
|
|
515
593
|
| | raw | gzipped |
|
|
@@ -524,6 +602,8 @@ every kilobyte counts, copy the specific `.ldr--*` blocks out of [`src/styles/`]
|
|
|
524
602
|
into your own CSS and skip the package — each block is self-contained apart from the shared
|
|
525
603
|
keyframes in [`00-base.css`](./src/styles/00-base.css).
|
|
526
604
|
|
|
605
|
+
---
|
|
606
|
+
|
|
527
607
|
## Named exports
|
|
528
608
|
|
|
529
609
|
`Loader` is the main export. The original ten also have wrappers, kept for backward compatibility
|
|
@@ -536,6 +616,8 @@ import { Aurora, Orbit, Rings, Wave, Bars, Blob, Cube, Spiral, Bar, Grid } from
|
|
|
536
616
|
Everything else is reached with `<Loader variant="…" />`. Two hundred named exports would bloat
|
|
537
617
|
the API surface for no real gain, and `variant` autocompletes just as well.
|
|
538
618
|
|
|
619
|
+
---
|
|
620
|
+
|
|
539
621
|
## Browser support
|
|
540
622
|
|
|
541
623
|
Chrome 111+ · Safari 16.4+ · Firefox 113+ — the floor is set by `color-mix()`, alongside `mask`,
|
|
@@ -546,12 +628,14 @@ Five variants — `neon-arc`, `pie`, `progress-ring`, `gradient-border`, `color-
|
|
|
546
628
|
registered custom property via `@property` (Firefox 128+). Every use passes a fallback, so below
|
|
547
629
|
that they render a sensible static frame instead of disappearing.
|
|
548
630
|
|
|
631
|
+
---
|
|
632
|
+
|
|
549
633
|
## Development
|
|
550
634
|
|
|
551
635
|
```bash
|
|
552
636
|
npm run dev # showcase: search, 20 family filters, live size / speed / palette, detail sheet
|
|
553
637
|
npm run build # typecheck, then emit dist/ (ESM + CJS + .d.ts + CSS)
|
|
554
|
-
npm run build:demo # static showcase → dist-demo/
|
|
638
|
+
npm run build:demo # static showcase → dist-demo/ (deployed to modern-loaders.netlify.app)
|
|
555
639
|
```
|
|
556
640
|
|
|
557
641
|
Adding a variant takes two edits: a `.ldr--<id>` block in `src/styles/`, and a row in
|
|
@@ -563,6 +647,12 @@ Two rules keep the motion composable inside a variant: put a whole radial chain
|
|
|
563
647
|
and reach for the standalone `translate` / `rotate` / `scale` properties when an element already
|
|
564
648
|
animates `transform` — they compose instead of overwriting it.
|
|
565
649
|
|
|
650
|
+
---
|
|
651
|
+
|
|
566
652
|
## License
|
|
567
653
|
|
|
568
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
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "modern-loaders",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.2",
|
|
4
4
|
"description": "212 modern, colorful, animated React loaders \u2014 pure CSS, zero runtime dependencies",
|
|
5
5
|
"author": "suman",
|
|
6
|
+
"homepage": "https://modern-loaders.netlify.app/",
|
|
6
7
|
"license": "ISC",
|
|
7
8
|
"type": "module",
|
|
8
9
|
"sideEffects": [
|