modern-loaders 1.2.3 → 1.3.0
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 +268 -16
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +1 -1
- package/dist/index.d.ts +668 -0
- package/dist/index.js +176 -20
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
<h1>modern-loaders</h1>
|
|
4
4
|
|
|
5
|
-
<p><b>
|
|
5
|
+
<p><b>336 ready-made loading animations for React.</b><br/>
|
|
6
6
|
One component, pure CSS motion, zero runtime dependencies.</p>
|
|
7
7
|
|
|
8
8
|
[](https://www.npmjs.com/package/modern-loaders)
|
|
@@ -16,7 +16,7 @@ One component, pure CSS motion, zero runtime dependencies.</p>
|
|
|
16
16
|
npm install modern-loaders
|
|
17
17
|
```
|
|
18
18
|
|
|
19
|
-
[](https://modern-loaders.netlify.app/)
|
|
20
20
|
|
|
21
21
|
</div>
|
|
22
22
|
|
|
@@ -24,7 +24,7 @@ npm install modern-loaders
|
|
|
24
24
|
|
|
25
25
|
## What is modern-loaders?
|
|
26
26
|
|
|
27
|
-
A library of **
|
|
27
|
+
A library of **336 loading animations** for React, all behind a single
|
|
28
28
|
`<Loader />` component.
|
|
29
29
|
|
|
30
30
|
**The problem.** Every app needs loading states. Building them by hand means
|
|
@@ -37,7 +37,7 @@ thread and there is nothing to install alongside it.
|
|
|
37
37
|
|
|
38
38
|
### Why developers use it
|
|
39
39
|
|
|
40
|
-
- **
|
|
40
|
+
- **336 variants across 36 families** — abstract families (spinners, dots, bars, shapes, neon, liquid, glitch, particles…) plus concrete ones that match what your app is actually doing: medical, space, weather, technology, AI, communication, security, developer, data, finance, transport, food, creative, physics, gaming.
|
|
41
41
|
- **Three props to learn.** `size`, `speed`, `colors`. Everything else has a sensible default.
|
|
42
42
|
- **Zero dependencies.** ~4 kB of JS. All motion is CSS keyframes — no rAF loop, no JS on the animation path.
|
|
43
43
|
- **Fully typed.** `variant` autocompletes every id, and a typo is a compile error.
|
|
@@ -107,7 +107,7 @@ Set the size, speed and colours:
|
|
|
107
107
|
```
|
|
108
108
|
|
|
109
109
|
Not sure which one to pick?
|
|
110
|
-
[**Browse all
|
|
110
|
+
[**Browse all 336 in the live gallery →**](https://modern-loaders.netlify.app/)
|
|
111
111
|
|
|
112
112
|
---
|
|
113
113
|
|
|
@@ -117,7 +117,7 @@ Not sure which one to pick?
|
|
|
117
117
|
- [Recipes](#recipes)
|
|
118
118
|
- [Customization](#customization)
|
|
119
119
|
- [API](#api)
|
|
120
|
-
- [All
|
|
120
|
+
- [All 336 variants](#all-336-variants)
|
|
121
121
|
- [Accessibility](#accessibility)
|
|
122
122
|
- [Bundle size](#bundle-size)
|
|
123
123
|
- [Browser support](#browser-support)
|
|
@@ -255,7 +255,7 @@ directly for finer control.
|
|
|
255
255
|
|
|
256
256
|
| prop | type | default | description |
|
|
257
257
|
|---|---|---|---|
|
|
258
|
-
| `variant` | `LoaderVariant` | `"aurora"` | Which loader to render — any of the
|
|
258
|
+
| `variant` | `LoaderVariant` | `"aurora"` | Which loader to render — any of the 336 ids below. |
|
|
259
259
|
| `size` | `number \| string` | `48` | Overall size. A number means pixels; strings pass through (`"3rem"`). |
|
|
260
260
|
| `speed` | `number \| string` | `1` | Base duration. A number means seconds; lower is faster. |
|
|
261
261
|
| `colors` | `string[]` | indigo / pink / cyan | One to three colours. Fewer are cycled, so a single colour gives a clean monochrome loader. |
|
|
@@ -269,9 +269,9 @@ passes straight through.
|
|
|
269
269
|
| export | what it is |
|
|
270
270
|
|---|---|
|
|
271
271
|
| `Loader` | The component. |
|
|
272
|
-
| `VARIANTS` | Manifest of all
|
|
273
|
-
| `LOADER_VARIANTS` | Just the
|
|
274
|
-
| `GROUPS` | The
|
|
272
|
+
| `VARIANTS` | Manifest of all 336: `{ id, label, group, cells }`. |
|
|
273
|
+
| `LOADER_VARIANTS` | Just the 336 ids, in display order. |
|
|
274
|
+
| `GROUPS` | The 36 families: `{ name, description }`. |
|
|
275
275
|
|
|
276
276
|
`Loader` is the main export. The original ten also have named wrappers, kept for
|
|
277
277
|
backward compatibility with 1.0.x:
|
|
@@ -299,7 +299,7 @@ import type {
|
|
|
299
299
|
VariantMeta,
|
|
300
300
|
} from "modern-loaders";
|
|
301
301
|
|
|
302
|
-
// a union of all
|
|
302
|
+
// a union of all 336 ids; typos fail to compile
|
|
303
303
|
const variant: LoaderVariant = "aurora";
|
|
304
304
|
|
|
305
305
|
// wrap Loader without re-declaring its props
|
|
@@ -310,7 +310,7 @@ function Busy(props: LoaderProps) {
|
|
|
310
310
|
|
|
311
311
|
---
|
|
312
312
|
|
|
313
|
-
## All
|
|
313
|
+
## All 336 variants
|
|
314
314
|
|
|
315
315
|
Every id maps to a `.ldr--<id>` CSS class. The tables below are the full
|
|
316
316
|
reference; to *see* them moving, use the [live gallery](https://modern-loaders.netlify.app/) — it renders
|
|
@@ -688,6 +688,258 @@ every variant with your own size, speed and colours, and copies the JSX for you.
|
|
|
688
688
|
|
|
689
689
|
</details>
|
|
690
690
|
|
|
691
|
+
<details>
|
|
692
|
+
<summary><b>Medical</b> · 8 — Physiology, diagnostics and the clinic.</summary>
|
|
693
|
+
|
|
694
|
+
| variant | what it looks like |
|
|
695
|
+
|---|---|
|
|
696
|
+
| `ecg` | a heart trace drawing itself across a monitor grid |
|
|
697
|
+
| `vitals` | three traces running at three different rhythms |
|
|
698
|
+
| `lungs` | a pair of lobes filling and emptying with the breath |
|
|
699
|
+
| `capsule` | a pill parting to release its granules, then closing |
|
|
700
|
+
| `syringe` | the plunger going down and a bead forming at the needle |
|
|
701
|
+
| `microscope` | a field of view drifting in and out of focus |
|
|
702
|
+
| `cell-divide` | one cell pinching in two, over and over |
|
|
703
|
+
| `blood-flow` | corpuscles carried along a vessel |
|
|
704
|
+
|
|
705
|
+
</details>
|
|
706
|
+
|
|
707
|
+
<details>
|
|
708
|
+
<summary><b>Space</b> · 8 — Astrophysics — discs, orbits, and things igniting.</summary>
|
|
709
|
+
|
|
710
|
+
| variant | what it looks like |
|
|
711
|
+
|---|---|
|
|
712
|
+
| `black-hole` | an accretion disc tilted around a lensed event horizon |
|
|
713
|
+
| `eclipse` | one body crossing another, corona flaring at totality |
|
|
714
|
+
| `star-birth` | a dust cloud collapsing, igniting, and dispersing |
|
|
715
|
+
| `constellation` | stars joined by lines drawn one segment at a time |
|
|
716
|
+
| `meteor-shower` | streaks raking across the sky on a shared diagonal |
|
|
717
|
+
| `solar-system` | planets keeping their own year on nested orbits |
|
|
718
|
+
| `rocket` | a climb with a flickering plume and stars falling past |
|
|
719
|
+
| `pulsar` | twin beams raking round from a spinning neutron star |
|
|
720
|
+
|
|
721
|
+
</details>
|
|
722
|
+
|
|
723
|
+
<details>
|
|
724
|
+
<summary><b>Nature</b> · 9 — Growing, burning, blowing and blooming.</summary>
|
|
725
|
+
|
|
726
|
+
| variant | what it looks like |
|
|
727
|
+
|---|---|
|
|
728
|
+
| `bloom-flower` | petals unfolding from a bud and closing again |
|
|
729
|
+
| `sprout` | a seedling pushing up and unfurling two leaves |
|
|
730
|
+
| `tree-grow` | a trunk throwing out branches, tip by tip |
|
|
731
|
+
| `smoke` | puffs curling up and thinning out |
|
|
732
|
+
| `tornado` | a funnel of debris touching down and swaying |
|
|
733
|
+
| `wind` | gusts streaming past at their own pace |
|
|
734
|
+
| `butterfly` | wings beating with a little perspective |
|
|
735
|
+
| `honeycomb` | cells capped one after another |
|
|
736
|
+
| `rainbow` | bands arcing in from the outside |
|
|
737
|
+
|
|
738
|
+
</details>
|
|
739
|
+
|
|
740
|
+
<details>
|
|
741
|
+
<summary><b>Weather</b> · 7 — Sky conditions, from a clear sun to a full storm.</summary>
|
|
742
|
+
|
|
743
|
+
| variant | what it looks like |
|
|
744
|
+
|---|---|
|
|
745
|
+
| `cloud-form` | puffs gathering into one cloud, then breaking apart |
|
|
746
|
+
| `storm` | a dark cloud dropping rain, lit from inside every few beats |
|
|
747
|
+
| `fog` | layered banks sliding past each other |
|
|
748
|
+
| `sun-clouds` | cloud cover drifting over a slow sun |
|
|
749
|
+
| `frost` | a crystal growing its six arms and their side branches |
|
|
750
|
+
| `sunbeam` | shafts of light swinging through a gap |
|
|
751
|
+
| `thermometer` | the column climbing and falling back |
|
|
752
|
+
|
|
753
|
+
</details>
|
|
754
|
+
|
|
755
|
+
<details>
|
|
756
|
+
<summary><b>Technology</b> · 9 — Hardware doing its job — power, radio, silicon, disks.</summary>
|
|
757
|
+
|
|
758
|
+
| variant | what it looks like |
|
|
759
|
+
|---|---|
|
|
760
|
+
| `battery` | cells charging in turn behind a travelling bolt |
|
|
761
|
+
| `wifi` | arcs acquiring outward from the source |
|
|
762
|
+
| `signal-tower` | a mast pushing rings out to both sides |
|
|
763
|
+
| `cpu` | a die working away behind its pins |
|
|
764
|
+
| `server-rack` | units blinking under a maintenance sweep |
|
|
765
|
+
| `packets` | traffic queueing at one node and arriving at the other |
|
|
766
|
+
| `data-transfer` | two devices trading rows in both directions at once |
|
|
767
|
+
| `hard-drive` | a platter spinning under a seeking head |
|
|
768
|
+
| `power-plug` | prongs seating into a socket and the line coming alive |
|
|
769
|
+
|
|
770
|
+
</details>
|
|
771
|
+
|
|
772
|
+
<details>
|
|
773
|
+
<summary><b>AI</b> · 8 — Models thinking: layers, signals, tokens and clusters.</summary>
|
|
774
|
+
|
|
775
|
+
| variant | what it looks like |
|
|
776
|
+
|---|---|
|
|
777
|
+
| `neural-net` | layers firing left to right along lit connections |
|
|
778
|
+
| `ai-think` | thoughts rippling out inside a soft brain shape |
|
|
779
|
+
| `synapse` | a signal jumping the cleft and lighting the far terminal |
|
|
780
|
+
| `ml-train` | gradient descent rolling into the bottom of the bowl |
|
|
781
|
+
| `token-stream` | words landing one at a time as they are generated |
|
|
782
|
+
| `attention` | a focus window sliding along the context |
|
|
783
|
+
| `robot-eyes` | a machine sweeping its gaze, blinking now and then |
|
|
784
|
+
| `embedding` | scattered points settling into their clusters |
|
|
785
|
+
|
|
786
|
+
</details>
|
|
787
|
+
|
|
788
|
+
<details>
|
|
789
|
+
<summary><b>Communication</b> · 8 — Messages leaving, arriving, and being understood.</summary>
|
|
790
|
+
|
|
791
|
+
| variant | what it looks like |
|
|
792
|
+
|---|---|
|
|
793
|
+
| `message-send` | a bubble launching out of the composer |
|
|
794
|
+
| `delivery-ticks` | sent, delivered, then read |
|
|
795
|
+
| `envelope` | the flap lifting and the letter sliding out |
|
|
796
|
+
| `bell` | a notification swinging in with its badge |
|
|
797
|
+
| `chat-threads` | a conversation filling in, turn by turn |
|
|
798
|
+
| `voice-wave` | a rendered clip with the playhead running over it |
|
|
799
|
+
| `mic-listen` | a capsule picking up level rings |
|
|
800
|
+
| `translate` | one script resolving into another |
|
|
801
|
+
|
|
802
|
+
</details>
|
|
803
|
+
|
|
804
|
+
<details>
|
|
805
|
+
<summary><b>Security</b> · 8 — Locks, scans and ciphers doing their checks.</summary>
|
|
806
|
+
|
|
807
|
+
| variant | what it looks like |
|
|
808
|
+
|---|---|
|
|
809
|
+
| `padlock` | the shackle lifting clear and dropping back |
|
|
810
|
+
| `fingerprint` | ridges read one pass at a time |
|
|
811
|
+
| `face-scan` | a mesh mapping itself onto a face outline |
|
|
812
|
+
| `qr-scan` | a code resolving under the reader |
|
|
813
|
+
| `encrypt` | plaintext blocks scrambling into cipher behind a wavefront |
|
|
814
|
+
| `key-turn` | a key going in and throwing the lock |
|
|
815
|
+
| `otp-code` | a one-time code arriving digit by digit |
|
|
816
|
+
| `vault` | a combination dial hunting for each number |
|
|
817
|
+
|
|
818
|
+
</details>
|
|
819
|
+
|
|
820
|
+
<details>
|
|
821
|
+
<summary><b>Developer</b> · 8 — The inner loop: compile, branch, build, ship.</summary>
|
|
822
|
+
|
|
823
|
+
| variant | what it looks like |
|
|
824
|
+
|---|---|
|
|
825
|
+
| `code-compile` | source rows collapsing into compiled blocks |
|
|
826
|
+
| `git-branch` | work splitting off the trunk and merging back in |
|
|
827
|
+
| `pipeline` | a build moving through its stages |
|
|
828
|
+
| `npm-install` | packages dropping in and stacking up |
|
|
829
|
+
| `container` | image layers stacking, then the container coming up |
|
|
830
|
+
| `k8s-pods` | replicas retiring while their replacements come up |
|
|
831
|
+
| `bug-fix` | a lens sweeping the file until the bad line goes green |
|
|
832
|
+
| `code-diff` | a patch landing, removals out and additions in |
|
|
833
|
+
|
|
834
|
+
</details>
|
|
835
|
+
|
|
836
|
+
<details>
|
|
837
|
+
<summary><b>Data</b> · 9 — Stores queried, files parsed, records moved.</summary>
|
|
838
|
+
|
|
839
|
+
| variant | what it looks like |
|
|
840
|
+
|---|---|
|
|
841
|
+
| `db-query` | a scan running down the store and rows coming back |
|
|
842
|
+
| `db-sync` | two stores reconciling records in both directions |
|
|
843
|
+
| `scatter-plot` | samples landing, then the fit drawn through them |
|
|
844
|
+
| `spreadsheet` | cells recalculating a row at a time |
|
|
845
|
+
| `file-scan` | a page read line by line under the head |
|
|
846
|
+
| `folder-scan` | folders opened and counted one after another |
|
|
847
|
+
| `cloud-sync` | a device and the cloud keeping each other current |
|
|
848
|
+
| `backup` | documents filed into the archive, which then seals |
|
|
849
|
+
| `data-funnel` | a wide intake narrowing to what actually gets through |
|
|
850
|
+
|
|
851
|
+
</details>
|
|
852
|
+
|
|
853
|
+
<details>
|
|
854
|
+
<summary><b>Finance</b> · 6 — Money changing hands and being checked.</summary>
|
|
855
|
+
|
|
856
|
+
| variant | what it looks like |
|
|
857
|
+
|---|---|
|
|
858
|
+
| `payment-card` | a card read, checked, and approved |
|
|
859
|
+
| `coin-flip` | a coin turning end over end and settling |
|
|
860
|
+
| `cart` | items dropped into the basket, one after another |
|
|
861
|
+
| `receipt` | a slip printing out line by line |
|
|
862
|
+
| `stock-candles` | a session printing candle by candle |
|
|
863
|
+
| `money-transfer` | funds arcing from one account to the other |
|
|
864
|
+
|
|
865
|
+
</details>
|
|
866
|
+
|
|
867
|
+
<details>
|
|
868
|
+
<summary><b>Transport</b> · 7 — Getting there: fixes, routes, wheels and wings.</summary>
|
|
869
|
+
|
|
870
|
+
| variant | what it looks like |
|
|
871
|
+
|---|---|
|
|
872
|
+
| `gps-locate` | a pin dropping and the fix tightening around it |
|
|
873
|
+
| `route-calc` | a path being solved between two stops |
|
|
874
|
+
| `compass` | a needle hunting and settling on north |
|
|
875
|
+
| `truck` | a delivery run with the road moving underneath |
|
|
876
|
+
| `package-track` | a parcel clearing each checkpoint on the way |
|
|
877
|
+
| `plane-path` | a flight tracing its great circle between cities |
|
|
878
|
+
| `traffic-light` | the signal running its full phase |
|
|
879
|
+
|
|
880
|
+
</details>
|
|
881
|
+
|
|
882
|
+
<details>
|
|
883
|
+
<summary><b>Food</b> · 6 — Things brewing, baking, tossing and popping.</summary>
|
|
884
|
+
|
|
885
|
+
| variant | what it looks like |
|
|
886
|
+
|---|---|
|
|
887
|
+
| `coffee-brew` | the cup filling drip by drip |
|
|
888
|
+
| `oven-bake` | a loaf rising behind the oven door |
|
|
889
|
+
| `pizza-slices` | slices swinging back into a whole |
|
|
890
|
+
| `pan-flip` | a toss, a turn, and a catch |
|
|
891
|
+
| `blender` | the jug pulling everything into the vortex |
|
|
892
|
+
| `toaster` | the slices browning and springing up |
|
|
893
|
+
|
|
894
|
+
</details>
|
|
895
|
+
|
|
896
|
+
<details>
|
|
897
|
+
<summary><b>Creative</b> · 8 — Studio tools: pencils, brushes, lenses and type.</summary>
|
|
898
|
+
|
|
899
|
+
| variant | what it looks like |
|
|
900
|
+
|---|---|
|
|
901
|
+
| `pencil-draw` | a line laid down and rubbed out again |
|
|
902
|
+
| `brush-stroke` | a loaded brush laying a wet band of colour |
|
|
903
|
+
| `palette` | wells of paint, each lifted as it is picked up |
|
|
904
|
+
| `camera-focus` | the iris stopping down and pulling focus |
|
|
905
|
+
| `film-strip` | frames running past the gate |
|
|
906
|
+
| `vinyl` | the record turning under the arm |
|
|
907
|
+
| `book-flip` | pages turning one at a time |
|
|
908
|
+
| `typeset` | glyphs settling into a headline and kerning true |
|
|
909
|
+
|
|
910
|
+
</details>
|
|
911
|
+
|
|
912
|
+
<details>
|
|
913
|
+
<summary><b>Physics</b> · 8 — Fields, charge, gravity and standing waves.</summary>
|
|
914
|
+
|
|
915
|
+
| variant | what it looks like |
|
|
916
|
+
|---|---|
|
|
917
|
+
| `magnetic-field` | flux running pole to pole |
|
|
918
|
+
| `lightning` | a bolt forking down and lighting the whole sky |
|
|
919
|
+
| `electric-arc` | a discharge jumping the gap and jittering |
|
|
920
|
+
| `gravity-well` | a mass denting the grid and dragging a body round |
|
|
921
|
+
| `interference` | two sources and the pattern where they meet |
|
|
922
|
+
| `pendulum-wave` | different lengths drifting in and out of phase |
|
|
923
|
+
| `newton-disc` | segments blurring toward white as the disc winds up |
|
|
924
|
+
| `resonance` | a string stepping up through its harmonics |
|
|
925
|
+
|
|
926
|
+
</details>
|
|
927
|
+
|
|
928
|
+
<details>
|
|
929
|
+
<summary><b>Gaming</b> · 7 — HUD and pickup motion lifted from games.</summary>
|
|
930
|
+
|
|
931
|
+
| variant | what it looks like |
|
|
932
|
+
|---|---|
|
|
933
|
+
| `health-bar` | damage chipping away, then a heal |
|
|
934
|
+
| `dice-roll` | a die tumbling and coming to rest |
|
|
935
|
+
| `level-up` | the bar topping out and the badge landing |
|
|
936
|
+
| `coin-collect` | pickups spinning up into the counter |
|
|
937
|
+
| `chomp` | a mouth working its way along the row |
|
|
938
|
+
| `sprite-march` | a squad stepping along in formation |
|
|
939
|
+
| `mana-orb` | a reservoir refilling behind glass |
|
|
940
|
+
|
|
941
|
+
</details>
|
|
942
|
+
|
|
691
943
|
---
|
|
692
944
|
|
|
693
945
|
## Accessibility
|
|
@@ -702,13 +954,13 @@ every variant with your own size, speed and colours, and copies the JSX for you.
|
|
|
702
954
|
|
|
703
955
|
| | raw | gzipped |
|
|
704
956
|
|---|---|---|
|
|
705
|
-
| JS | ~
|
|
706
|
-
| CSS (all
|
|
957
|
+
| JS | ~29 kB | **~7 kB** |
|
|
958
|
+
| CSS (all 336 variants) | ~321 kB | **~47 kB** |
|
|
707
959
|
|
|
708
960
|
One caveat, stated plainly: **the CSS is not tree-shakeable.** Class-based
|
|
709
961
|
styles cannot be dead-code eliminated, so importing a single variant still ships
|
|
710
|
-
the sheet for all
|
|
711
|
-
|
|
962
|
+
the sheet for all 336. At ~47 kB gzipped that is real weight, so if you only need
|
|
963
|
+
a handful it is worth opting out: copy
|
|
712
964
|
the specific `.ldr--*` blocks out of [`src/styles/`](./src/styles) into your own
|
|
713
965
|
CSS and skip the package — each block is self-contained apart from the shared
|
|
714
966
|
keyframes in [`00-base.css`](./src/styles/00-base.css).
|
package/dist/index.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const e=require("react/jsx-runtime"),c=[{id:"aurora",label:"Aurora",group:"Spinners",cells:0},{id:"spiral",label:"Spiral",group:"Spinners",cells:0},{id:"ring-dash",label:"Ring Dash",group:"Spinners",cells:0},{id:"ring-gap",label:"Ring Gap",group:"Spinners",cells:0},{id:"comet",label:"Comet",group:"Spinners",cells:1},{id:"arc-trio",label:"Arc Trio",group:"Spinners",cells:3},{id:"halo",label:"Halo",group:"Spinners",cells:1},{id:"sweep",label:"Sweep",group:"Spinners",cells:0},{id:"dot-ring",label:"Dot Ring",group:"Spinners",cells:8},{id:"petal",label:"Petal",group:"Spinners",cells:8},{id:"wave",label:"Wave",group:"Dots",cells:5},{id:"orbit",label:"Orbit",group:"Dots",cells:3},{id:"bounce",label:"Bounce",group:"Dots",cells:3},{id:"fade-dots",label:"Fade Dots",group:"Dots",cells:3},{id:"pulse-dots",label:"Pulse Dots",group:"Dots",cells:3},{id:"typing",label:"Typing",group:"Dots",cells:3},{id:"chase",label:"Chase",group:"Dots",cells:6},{id:"snake",label:"Snake",group:"Dots",cells:5},{id:"swap",label:"Swap",group:"Dots",cells:2},{id:"juggle",label:"Juggle",group:"Dots",cells:3},{id:"bars",label:"Bars",group:"Bars",cells:5},{id:"ladder",label:"Ladder",group:"Bars",cells:4},{id:"stretch",label:"Stretch",group:"Bars",cells:5},{id:"flip-bars",label:"Flip Bars",group:"Bars",cells:5},{id:"slide-bars",label:"Slide Bars",group:"Bars",cells:3},{id:"drop-bars",label:"Drop Bars",group:"Bars",cells:5},{id:"meter",label:"Meter",group:"Bars",cells:5},{id:"wave-bars",label:"Wave Bars",group:"Bars",cells:7},{id:"split-bars",label:"Split Bars",group:"Bars",cells:4},{id:"scan-bars",label:"Scan Bars",group:"Bars",cells:6},{id:"blob",label:"Blob",group:"Shapes",cells:0},{id:"cube",label:"Cube",group:"Shapes",cells:2},{id:"triangle",label:"Triangle",group:"Shapes",cells:0},{id:"hexagon",label:"Hexagon",group:"Shapes",cells:0},{id:"diamond",label:"Diamond",group:"Shapes",cells:0},{id:"star",label:"Star",group:"Shapes",cells:0},{id:"squircle",label:"Squircle",group:"Shapes",cells:0},{id:"folding",label:"Folding",group:"Shapes",cells:4},{id:"pentagon",label:"Pentagon",group:"Shapes",cells:0},{id:"shape-shift",label:"Shape Shift",group:"Shapes",cells:0},{id:"bar",label:"Bar",group:"Progress",cells:0},{id:"bar-stripes",label:"Bar Stripes",group:"Progress",cells:0},{id:"bar-dual",label:"Bar Dual",group:"Progress",cells:0},{id:"bar-segments",label:"Bar Segments",group:"Progress",cells:5},{id:"bar-pill",label:"Bar Pill",group:"Progress",cells:0},{id:"bar-glow",label:"Bar Glow",group:"Progress",cells:0},{id:"bar-wave",label:"Bar Wave",group:"Progress",cells:0},{id:"bar-dots",label:"Bar Dots",group:"Progress",cells:5},{id:"bar-snake",label:"Bar Snake",group:"Progress",cells:0},{id:"bar-fill",label:"Bar Fill",group:"Progress",cells:0},{id:"grid",label:"Grid",group:"Grids",cells:9},{id:"checker",label:"Checker",group:"Grids",cells:9},{id:"cascade",label:"Cascade",group:"Grids",cells:9},{id:"tiles",label:"Tiles",group:"Grids",cells:9},{id:"pixel",label:"Pixel",group:"Grids",cells:16},{id:"matrix",label:"Matrix",group:"Grids",cells:9},{id:"mosaic",label:"Mosaic",group:"Grids",cells:9},{id:"ripple-grid",label:"Ripple Grid",group:"Grids",cells:9},{id:"domino",label:"Domino",group:"Grids",cells:9},{id:"sparkle",label:"Sparkle",group:"Grids",cells:9},{id:"rings",label:"Rings",group:"Pulses",cells:3},{id:"radar",label:"Radar",group:"Pulses",cells:2},{id:"sonar",label:"Sonar",group:"Pulses",cells:3},{id:"echo",label:"Echo",group:"Pulses",cells:3},{id:"shockwave",label:"Shockwave",group:"Pulses",cells:2},{id:"bloom",label:"Bloom",group:"Pulses",cells:3},{id:"droplet",label:"Droplet",group:"Pulses",cells:2},{id:"concentric",label:"Concentric",group:"Pulses",cells:3},{id:"aura",label:"Aura",group:"Pulses",cells:1},{id:"beacon",label:"Beacon",group:"Pulses",cells:2},{id:"heart",label:"Heart",group:"Organic",cells:0},{id:"moon",label:"Moon",group:"Organic",cells:0},{id:"sun",label:"Sun",group:"Organic",cells:8},{id:"flame",label:"Flame",group:"Organic",cells:0},{id:"bubble",label:"Bubble",group:"Organic",cells:3},{id:"jelly",label:"Jelly",group:"Organic",cells:0},{id:"spring",label:"Spring",group:"Organic",cells:0},{id:"float",label:"Float",group:"Organic",cells:1},{id:"leaf",label:"Leaf",group:"Organic",cells:0},{id:"windmill",label:"Windmill",group:"Organic",cells:4},{id:"shimmer",label:"Shimmer",group:"Skeletons",cells:0},{id:"sk-text",label:"Text",group:"Skeletons",cells:3},{id:"sk-card",label:"Card",group:"Skeletons",cells:3},{id:"sk-avatar",label:"Avatar",group:"Skeletons",cells:2},{id:"sk-image",label:"Image",group:"Skeletons",cells:0},{id:"sk-list",label:"List",group:"Skeletons",cells:3},{id:"sk-table",label:"Table",group:"Skeletons",cells:4},{id:"sk-chip",label:"Chips",group:"Skeletons",cells:3},{id:"sk-paragraph",label:"Paragraph",group:"Skeletons",cells:4},{id:"sk-media",label:"Media",group:"Skeletons",cells:2},{id:"helix",label:"Helix",group:"Dimensional",cells:8},{id:"pendulum",label:"Pendulum",group:"Dimensional",cells:5},{id:"atom",label:"Atom",group:"Dimensional",cells:3},{id:"gyro",label:"Gyro",group:"Dimensional",cells:3},{id:"coil",label:"Coil",group:"Dimensional",cells:5},{id:"vortex",label:"Vortex",group:"Dimensional",cells:4},{id:"prism",label:"Prism",group:"Dimensional",cells:3},{id:"torus",label:"Torus",group:"Dimensional",cells:0},{id:"cylinder",label:"Cylinder",group:"Dimensional",cells:4},{id:"galaxy",label:"Galaxy",group:"Dimensional",cells:6},{id:"neon-ring",label:"Neon Ring",group:"Neon",cells:0},{id:"neon-pulse",label:"Neon Pulse",group:"Neon",cells:0},{id:"neon-tube",label:"Neon Tube",group:"Neon",cells:0},{id:"neon-sign",label:"Neon Sign",group:"Neon",cells:4},{id:"laser",label:"Laser",group:"Neon",cells:0},{id:"light-trail",label:"Light Trail",group:"Neon",cells:0},{id:"neon-arc",label:"Neon Arc",group:"Neon",cells:0},{id:"plasma",label:"Plasma",group:"Neon",cells:0},{id:"strobe",label:"Strobe",group:"Neon",cells:3},{id:"glow-dots",label:"Glow Dots",group:"Neon",cells:5},{id:"retro-grid",label:"Retro Grid",group:"Neon",cells:0},{id:"firefly",label:"Firefly",group:"Neon",cells:5},{id:"liquid-fill",label:"Liquid Fill",group:"Liquid",cells:2},{id:"drip",label:"Drip",group:"Liquid",cells:1},{id:"metaball",label:"Metaball",group:"Liquid",cells:2},{id:"wave-tank",label:"Wave Tank",group:"Liquid",cells:2},{id:"ripple-pool",label:"Ripple Pool",group:"Liquid",cells:3},{id:"mercury",label:"Mercury",group:"Liquid",cells:0},{id:"lava",label:"Lava",group:"Liquid",cells:3},{id:"ink",label:"Ink",group:"Liquid",cells:3},{id:"splash",label:"Splash",group:"Liquid",cells:3},{id:"whirl",label:"Whirl",group:"Liquid",cells:0},{id:"pour",label:"Pour",group:"Liquid",cells:2},{id:"glitch-block",label:"Glitch Block",group:"Glitch",cells:0},{id:"glitch-text",label:"Glitch Text",group:"Glitch",cells:3},{id:"rgb-split",label:"RGB Split",group:"Glitch",cells:3},{id:"scanlines",label:"Scanlines",group:"Glitch",cells:0},{id:"static-noise",label:"Static",group:"Glitch",cells:0},{id:"datamosh",label:"Datamosh",group:"Glitch",cells:5},{id:"corrupt-bar",label:"Corrupt Bar",group:"Glitch",cells:0},{id:"signal-loss",label:"Signal Loss",group:"Glitch",cells:4},{id:"vhs",label:"VHS",group:"Glitch",cells:0},{id:"pixel-drift",label:"Pixel Drift",group:"Glitch",cells:9},{id:"terminal",label:"Terminal",group:"Glitch",cells:2},{id:"confetti",label:"Confetti",group:"Particles",cells:8},{id:"firework",label:"Firework",group:"Particles",cells:8},{id:"snow",label:"Snow",group:"Particles",cells:6},{id:"embers",label:"Embers",group:"Particles",cells:5},{id:"starfield",label:"Starfield",group:"Particles",cells:8},{id:"dust",label:"Dust",group:"Particles",cells:7},{id:"burst",label:"Burst",group:"Particles",cells:6},{id:"swarm",label:"Swarm",group:"Particles",cells:7},{id:"rain",label:"Rain",group:"Particles",cells:6},{id:"magnet",label:"Magnet",group:"Particles",cells:7},{id:"nebula",label:"Nebula",group:"Particles",cells:6},{id:"hud-ring",label:"HUD Ring",group:"Futuristic",cells:2},{id:"reactor",label:"Reactor",group:"Futuristic",cells:3},{id:"hologram",label:"Hologram",group:"Futuristic",cells:3},{id:"warp",label:"Warp",group:"Futuristic",cells:4},{id:"targeting",label:"Targeting",group:"Futuristic",cells:4},{id:"circuit",label:"Circuit",group:"Futuristic",cells:3},{id:"barcode",label:"Barcode",group:"Futuristic",cells:0},{id:"quantum",label:"Quantum",group:"Futuristic",cells:6},{id:"portal",label:"Portal",group:"Futuristic",cells:0},{id:"shield",label:"Shield",group:"Futuristic",cells:2},{id:"satellite",label:"Satellite",group:"Futuristic",cells:3},{id:"teleport",label:"Teleport",group:"Futuristic",cells:6},{id:"rubber-band",label:"Rubber Band",group:"Elastic",cells:1},{id:"bungee",label:"Bungee",group:"Elastic",cells:1},{id:"trampoline",label:"Trampoline",group:"Elastic",cells:1},{id:"wobble",label:"Wobble",group:"Elastic",cells:0},{id:"pogo",label:"Pogo",group:"Elastic",cells:1},{id:"elastic-bar",label:"Elastic Bar",group:"Elastic",cells:0},{id:"catapult",label:"Catapult",group:"Elastic",cells:1},{id:"yo-yo",label:"Yo-yo",group:"Elastic",cells:1},{id:"elastic-ring",label:"Elastic Ring",group:"Elastic",cells:0},{id:"snap-dots",label:"Snap Dots",group:"Elastic",cells:2},{id:"chain",label:"Chain",group:"Elastic",cells:5},{id:"hairline",label:"Hairline",group:"Minimal",cells:0},{id:"tick",label:"Tick",group:"Minimal",cells:0},{id:"quarter",label:"Quarter",group:"Minimal",cells:0},{id:"dot-fade",label:"Dot Fade",group:"Minimal",cells:0},{id:"underline",label:"Underline",group:"Minimal",cells:0},{id:"pill-swap",label:"Pill Swap",group:"Minimal",cells:0},{id:"bracket",label:"Bracket",group:"Minimal",cells:2},{id:"slash",label:"Slash",group:"Minimal",cells:0},{id:"micro-dots",label:"Micro Dots",group:"Minimal",cells:3},{id:"ring-thin",label:"Ring Thin",group:"Minimal",cells:0},{id:"crosshair",label:"Crosshair",group:"Minimal",cells:0},{id:"mesh",label:"Mesh",group:"Gradient",cells:0},{id:"hue-ring",label:"Hue Ring",group:"Gradient",cells:0},{id:"gradient-orb",label:"Gradient Orb",group:"Gradient",cells:0},{id:"chroma",label:"Chroma",group:"Gradient",cells:3},{id:"ombre",label:"Ombré",group:"Gradient",cells:6},{id:"iridescent",label:"Iridescent",group:"Gradient",cells:0},{id:"sunrise",label:"Sunrise",group:"Gradient",cells:0},{id:"refract",label:"Refract",group:"Gradient",cells:3},{id:"gradient-border",label:"Gradient Border",group:"Gradient",cells:0},{id:"color-cycle",label:"Color Cycle",group:"Gradient",cells:0},{id:"northern",label:"Northern",group:"Gradient",cells:4},{id:"gears",label:"Gears",group:"Kinetic",cells:2},{id:"metronome",label:"Metronome",group:"Kinetic",cells:1},{id:"hourglass",label:"Hourglass",group:"Kinetic",cells:3},{id:"piston",label:"Piston",group:"Kinetic",cells:1},{id:"carousel",label:"Carousel",group:"Kinetic",cells:5},{id:"clockwork",label:"Clockwork",group:"Kinetic",cells:3},{id:"abacus",label:"Abacus",group:"Kinetic",cells:3},{id:"conveyor",label:"Conveyor",group:"Kinetic",cells:3},{id:"pie",label:"Pie",group:"Kinetic",cells:0},{id:"seesaw",label:"Seesaw",group:"Kinetic",cells:1},{id:"roller",label:"Roller",group:"Kinetic",cells:2},{id:"logo-morph",label:"Logo Morph",group:"Premium",cells:3},{id:"card-stack",label:"Card Stack",group:"Premium",cells:3},{id:"progress-ring",label:"Progress Ring",group:"Premium",cells:1},{id:"pill-progress",label:"Pill Progress",group:"Premium",cells:0},{id:"glass-ring",label:"Glass Ring",group:"Premium",cells:0},{id:"orbit-avatar",label:"Orbit Avatar",group:"Premium",cells:5},{id:"checklist",label:"Checklist",group:"Premium",cells:3},{id:"upload-cloud",label:"Upload Cloud",group:"Premium",cells:3},{id:"sync",label:"Sync",group:"Premium",cells:2},{id:"steps",label:"Steps",group:"Premium",cells:4},{id:"spark-line",label:"Spark Line",group:"Premium",cells:2}],b=[{name:"Spinners",description:"Rings and arcs — the classic shape, modernised."},{name:"Dots",description:"Small, quiet, and good inline with text."},{name:"Bars",description:"Equalizer-style motion with a strong rhythm."},{name:"Shapes",description:"Geometry that morphs, folds, and turns."},{name:"Progress",description:"Wide, indeterminate tracks for page and upload states."},{name:"Grids",description:"Cell fields that pulse, flip, and cascade."},{name:"Pulses",description:"Expanding rings for live, waiting, or listening states."},{name:"Organic",description:"Playful, physical motion with personality."},{name:"Skeletons",description:"Content-shaped placeholders — use these over spinners for page loads."},{name:"Dimensional",description:"Depth, 3D rotation, and orbital motion."},{name:"Neon",description:"Light that hums, blooms, and flickers alight."},{name:"Liquid",description:"Fluid behaviour — filling, pouring, rippling, merging."},{name:"Glitch",description:"Digital damage: tearing, static, dropout, corruption."},{name:"Particles",description:"Fields of small things falling, bursting, drifting, swarming."},{name:"Futuristic",description:"Reticles, reactors, and hardware that does not exist yet."},{name:"Elastic",description:"Spring physics with genuine overshoot and recoil."},{name:"Minimal",description:"Quiet motion for dense UI, toolbars, and inline text."},{name:"Gradient",description:"Colour itself is the animation."},{name:"Kinetic",description:"Mechanisms — gears, cranks, belts, beams, and escapements."},{name:"Premium",description:"Product-grade motion for onboarding, uploads, and sync."}],m=c.map(l=>l.id),h=Object.fromEntries(c.map(l=>[l.id,l.cells])),n=(l,s)=>typeof l=="number"?`${l}${s}`:l;function i({variant:l="aurora",size:s=48,speed:t=1,colors:r,label:o="Loading",className:d,style:u,...p}){const a={"--size":n(s,"px"),"--speed":n(t,"s")};return r!=null&&r.length&&(a["--c1"]=r[0],a["--c2"]=r[1%r.length],a["--c3"]=r[2%r.length]),e.jsx("div",{...p,className:["ldr",`ldr--${l}`,d].filter(Boolean).join(" "),style:{...a,...u},role:o?"status":void 0,"aria-label":o??void 0,"aria-hidden":o?void 0:!0,children:Array.from({length:h[l]??0},(x,g)=>e.jsx("span",{},g))})}const S=l=>e.jsx(i,{variant:"aurora",...l}),P=l=>e.jsx(i,{variant:"orbit",...l}),k=l=>e.jsx(i,{variant:"rings",...l}),G=l=>e.jsx(i,{variant:"wave",...l}),B=l=>e.jsx(i,{variant:"bars",...l}),f=l=>e.jsx(i,{variant:"blob",...l}),D=l=>e.jsx(i,{variant:"cube",...l}),v=l=>e.jsx(i,{variant:"spiral",...l}),w=l=>e.jsx(i,{variant:"bar",...l}),y=l=>e.jsx(i,{variant:"grid",...l});exports.Aurora=S;exports.Bar=w;exports.Bars=B;exports.Blob=f;exports.Cube=D;exports.GROUPS=b;exports.Grid=y;exports.LOADER_VARIANTS=m;exports.Loader=i;exports.Orbit=P;exports.Rings=k;exports.Spiral=v;exports.VARIANTS=c;exports.Wave=G;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const e=require("react/jsx-runtime"),c=[{id:"aurora",label:"Aurora",group:"Spinners",cells:0},{id:"spiral",label:"Spiral",group:"Spinners",cells:0},{id:"ring-dash",label:"Ring Dash",group:"Spinners",cells:0},{id:"ring-gap",label:"Ring Gap",group:"Spinners",cells:0},{id:"comet",label:"Comet",group:"Spinners",cells:1},{id:"arc-trio",label:"Arc Trio",group:"Spinners",cells:3},{id:"halo",label:"Halo",group:"Spinners",cells:1},{id:"sweep",label:"Sweep",group:"Spinners",cells:0},{id:"dot-ring",label:"Dot Ring",group:"Spinners",cells:8},{id:"petal",label:"Petal",group:"Spinners",cells:8},{id:"wave",label:"Wave",group:"Dots",cells:5},{id:"orbit",label:"Orbit",group:"Dots",cells:3},{id:"bounce",label:"Bounce",group:"Dots",cells:3},{id:"fade-dots",label:"Fade Dots",group:"Dots",cells:3},{id:"pulse-dots",label:"Pulse Dots",group:"Dots",cells:3},{id:"typing",label:"Typing",group:"Dots",cells:3},{id:"chase",label:"Chase",group:"Dots",cells:6},{id:"snake",label:"Snake",group:"Dots",cells:5},{id:"swap",label:"Swap",group:"Dots",cells:2},{id:"juggle",label:"Juggle",group:"Dots",cells:3},{id:"bars",label:"Bars",group:"Bars",cells:5},{id:"ladder",label:"Ladder",group:"Bars",cells:4},{id:"stretch",label:"Stretch",group:"Bars",cells:5},{id:"flip-bars",label:"Flip Bars",group:"Bars",cells:5},{id:"slide-bars",label:"Slide Bars",group:"Bars",cells:3},{id:"drop-bars",label:"Drop Bars",group:"Bars",cells:5},{id:"meter",label:"Meter",group:"Bars",cells:5},{id:"wave-bars",label:"Wave Bars",group:"Bars",cells:7},{id:"split-bars",label:"Split Bars",group:"Bars",cells:4},{id:"scan-bars",label:"Scan Bars",group:"Bars",cells:6},{id:"blob",label:"Blob",group:"Shapes",cells:0},{id:"cube",label:"Cube",group:"Shapes",cells:2},{id:"triangle",label:"Triangle",group:"Shapes",cells:0},{id:"hexagon",label:"Hexagon",group:"Shapes",cells:0},{id:"diamond",label:"Diamond",group:"Shapes",cells:0},{id:"star",label:"Star",group:"Shapes",cells:0},{id:"squircle",label:"Squircle",group:"Shapes",cells:0},{id:"folding",label:"Folding",group:"Shapes",cells:4},{id:"pentagon",label:"Pentagon",group:"Shapes",cells:0},{id:"shape-shift",label:"Shape Shift",group:"Shapes",cells:0},{id:"bar",label:"Bar",group:"Progress",cells:0},{id:"bar-stripes",label:"Bar Stripes",group:"Progress",cells:0},{id:"bar-dual",label:"Bar Dual",group:"Progress",cells:0},{id:"bar-segments",label:"Bar Segments",group:"Progress",cells:5},{id:"bar-pill",label:"Bar Pill",group:"Progress",cells:0},{id:"bar-glow",label:"Bar Glow",group:"Progress",cells:0},{id:"bar-wave",label:"Bar Wave",group:"Progress",cells:0},{id:"bar-dots",label:"Bar Dots",group:"Progress",cells:5},{id:"bar-snake",label:"Bar Snake",group:"Progress",cells:0},{id:"bar-fill",label:"Bar Fill",group:"Progress",cells:0},{id:"grid",label:"Grid",group:"Grids",cells:9},{id:"checker",label:"Checker",group:"Grids",cells:9},{id:"cascade",label:"Cascade",group:"Grids",cells:9},{id:"tiles",label:"Tiles",group:"Grids",cells:9},{id:"pixel",label:"Pixel",group:"Grids",cells:16},{id:"matrix",label:"Matrix",group:"Grids",cells:9},{id:"mosaic",label:"Mosaic",group:"Grids",cells:9},{id:"ripple-grid",label:"Ripple Grid",group:"Grids",cells:9},{id:"domino",label:"Domino",group:"Grids",cells:9},{id:"sparkle",label:"Sparkle",group:"Grids",cells:9},{id:"rings",label:"Rings",group:"Pulses",cells:3},{id:"radar",label:"Radar",group:"Pulses",cells:2},{id:"sonar",label:"Sonar",group:"Pulses",cells:3},{id:"echo",label:"Echo",group:"Pulses",cells:3},{id:"shockwave",label:"Shockwave",group:"Pulses",cells:2},{id:"bloom",label:"Bloom",group:"Pulses",cells:3},{id:"droplet",label:"Droplet",group:"Pulses",cells:2},{id:"concentric",label:"Concentric",group:"Pulses",cells:3},{id:"aura",label:"Aura",group:"Pulses",cells:1},{id:"beacon",label:"Beacon",group:"Pulses",cells:2},{id:"heart",label:"Heart",group:"Organic",cells:0},{id:"moon",label:"Moon",group:"Organic",cells:0},{id:"sun",label:"Sun",group:"Organic",cells:8},{id:"flame",label:"Flame",group:"Organic",cells:0},{id:"bubble",label:"Bubble",group:"Organic",cells:3},{id:"jelly",label:"Jelly",group:"Organic",cells:0},{id:"spring",label:"Spring",group:"Organic",cells:0},{id:"float",label:"Float",group:"Organic",cells:1},{id:"leaf",label:"Leaf",group:"Organic",cells:0},{id:"windmill",label:"Windmill",group:"Organic",cells:4},{id:"shimmer",label:"Shimmer",group:"Skeletons",cells:0},{id:"sk-text",label:"Text",group:"Skeletons",cells:3},{id:"sk-card",label:"Card",group:"Skeletons",cells:3},{id:"sk-avatar",label:"Avatar",group:"Skeletons",cells:2},{id:"sk-image",label:"Image",group:"Skeletons",cells:0},{id:"sk-list",label:"List",group:"Skeletons",cells:3},{id:"sk-table",label:"Table",group:"Skeletons",cells:4},{id:"sk-chip",label:"Chips",group:"Skeletons",cells:3},{id:"sk-paragraph",label:"Paragraph",group:"Skeletons",cells:4},{id:"sk-media",label:"Media",group:"Skeletons",cells:2},{id:"helix",label:"Helix",group:"Dimensional",cells:8},{id:"pendulum",label:"Pendulum",group:"Dimensional",cells:5},{id:"atom",label:"Atom",group:"Dimensional",cells:3},{id:"gyro",label:"Gyro",group:"Dimensional",cells:3},{id:"coil",label:"Coil",group:"Dimensional",cells:5},{id:"vortex",label:"Vortex",group:"Dimensional",cells:4},{id:"prism",label:"Prism",group:"Dimensional",cells:3},{id:"torus",label:"Torus",group:"Dimensional",cells:0},{id:"cylinder",label:"Cylinder",group:"Dimensional",cells:4},{id:"galaxy",label:"Galaxy",group:"Dimensional",cells:6},{id:"neon-ring",label:"Neon Ring",group:"Neon",cells:0},{id:"neon-pulse",label:"Neon Pulse",group:"Neon",cells:0},{id:"neon-tube",label:"Neon Tube",group:"Neon",cells:0},{id:"neon-sign",label:"Neon Sign",group:"Neon",cells:4},{id:"laser",label:"Laser",group:"Neon",cells:0},{id:"light-trail",label:"Light Trail",group:"Neon",cells:0},{id:"neon-arc",label:"Neon Arc",group:"Neon",cells:0},{id:"plasma",label:"Plasma",group:"Neon",cells:0},{id:"strobe",label:"Strobe",group:"Neon",cells:3},{id:"glow-dots",label:"Glow Dots",group:"Neon",cells:5},{id:"retro-grid",label:"Retro Grid",group:"Neon",cells:0},{id:"firefly",label:"Firefly",group:"Neon",cells:5},{id:"liquid-fill",label:"Liquid Fill",group:"Liquid",cells:2},{id:"drip",label:"Drip",group:"Liquid",cells:1},{id:"metaball",label:"Metaball",group:"Liquid",cells:2},{id:"wave-tank",label:"Wave Tank",group:"Liquid",cells:2},{id:"ripple-pool",label:"Ripple Pool",group:"Liquid",cells:3},{id:"mercury",label:"Mercury",group:"Liquid",cells:0},{id:"lava",label:"Lava",group:"Liquid",cells:3},{id:"ink",label:"Ink",group:"Liquid",cells:3},{id:"splash",label:"Splash",group:"Liquid",cells:3},{id:"whirl",label:"Whirl",group:"Liquid",cells:0},{id:"pour",label:"Pour",group:"Liquid",cells:2},{id:"glitch-block",label:"Glitch Block",group:"Glitch",cells:0},{id:"glitch-text",label:"Glitch Text",group:"Glitch",cells:3},{id:"rgb-split",label:"RGB Split",group:"Glitch",cells:3},{id:"scanlines",label:"Scanlines",group:"Glitch",cells:0},{id:"static-noise",label:"Static",group:"Glitch",cells:0},{id:"datamosh",label:"Datamosh",group:"Glitch",cells:5},{id:"corrupt-bar",label:"Corrupt Bar",group:"Glitch",cells:0},{id:"signal-loss",label:"Signal Loss",group:"Glitch",cells:4},{id:"vhs",label:"VHS",group:"Glitch",cells:0},{id:"pixel-drift",label:"Pixel Drift",group:"Glitch",cells:9},{id:"terminal",label:"Terminal",group:"Glitch",cells:2},{id:"confetti",label:"Confetti",group:"Particles",cells:8},{id:"firework",label:"Firework",group:"Particles",cells:8},{id:"snow",label:"Snow",group:"Particles",cells:6},{id:"embers",label:"Embers",group:"Particles",cells:5},{id:"starfield",label:"Starfield",group:"Particles",cells:8},{id:"dust",label:"Dust",group:"Particles",cells:7},{id:"burst",label:"Burst",group:"Particles",cells:6},{id:"swarm",label:"Swarm",group:"Particles",cells:7},{id:"rain",label:"Rain",group:"Particles",cells:6},{id:"magnet",label:"Magnet",group:"Particles",cells:7},{id:"nebula",label:"Nebula",group:"Particles",cells:6},{id:"hud-ring",label:"HUD Ring",group:"Futuristic",cells:2},{id:"reactor",label:"Reactor",group:"Futuristic",cells:3},{id:"hologram",label:"Hologram",group:"Futuristic",cells:3},{id:"warp",label:"Warp",group:"Futuristic",cells:4},{id:"targeting",label:"Targeting",group:"Futuristic",cells:4},{id:"circuit",label:"Circuit",group:"Futuristic",cells:3},{id:"barcode",label:"Barcode",group:"Futuristic",cells:0},{id:"quantum",label:"Quantum",group:"Futuristic",cells:6},{id:"portal",label:"Portal",group:"Futuristic",cells:0},{id:"shield",label:"Shield",group:"Futuristic",cells:2},{id:"satellite",label:"Satellite",group:"Futuristic",cells:3},{id:"teleport",label:"Teleport",group:"Futuristic",cells:6},{id:"rubber-band",label:"Rubber Band",group:"Elastic",cells:1},{id:"bungee",label:"Bungee",group:"Elastic",cells:1},{id:"trampoline",label:"Trampoline",group:"Elastic",cells:1},{id:"wobble",label:"Wobble",group:"Elastic",cells:0},{id:"pogo",label:"Pogo",group:"Elastic",cells:1},{id:"elastic-bar",label:"Elastic Bar",group:"Elastic",cells:0},{id:"catapult",label:"Catapult",group:"Elastic",cells:1},{id:"yo-yo",label:"Yo-yo",group:"Elastic",cells:1},{id:"elastic-ring",label:"Elastic Ring",group:"Elastic",cells:0},{id:"snap-dots",label:"Snap Dots",group:"Elastic",cells:2},{id:"chain",label:"Chain",group:"Elastic",cells:5},{id:"hairline",label:"Hairline",group:"Minimal",cells:0},{id:"tick",label:"Tick",group:"Minimal",cells:0},{id:"quarter",label:"Quarter",group:"Minimal",cells:0},{id:"dot-fade",label:"Dot Fade",group:"Minimal",cells:0},{id:"underline",label:"Underline",group:"Minimal",cells:0},{id:"pill-swap",label:"Pill Swap",group:"Minimal",cells:0},{id:"bracket",label:"Bracket",group:"Minimal",cells:2},{id:"slash",label:"Slash",group:"Minimal",cells:0},{id:"micro-dots",label:"Micro Dots",group:"Minimal",cells:3},{id:"ring-thin",label:"Ring Thin",group:"Minimal",cells:0},{id:"crosshair",label:"Crosshair",group:"Minimal",cells:0},{id:"mesh",label:"Mesh",group:"Gradient",cells:0},{id:"hue-ring",label:"Hue Ring",group:"Gradient",cells:0},{id:"gradient-orb",label:"Gradient Orb",group:"Gradient",cells:0},{id:"chroma",label:"Chroma",group:"Gradient",cells:3},{id:"ombre",label:"Ombré",group:"Gradient",cells:6},{id:"iridescent",label:"Iridescent",group:"Gradient",cells:0},{id:"sunrise",label:"Sunrise",group:"Gradient",cells:0},{id:"refract",label:"Refract",group:"Gradient",cells:3},{id:"gradient-border",label:"Gradient Border",group:"Gradient",cells:0},{id:"color-cycle",label:"Color Cycle",group:"Gradient",cells:0},{id:"northern",label:"Northern",group:"Gradient",cells:4},{id:"gears",label:"Gears",group:"Kinetic",cells:2},{id:"metronome",label:"Metronome",group:"Kinetic",cells:1},{id:"hourglass",label:"Hourglass",group:"Kinetic",cells:3},{id:"piston",label:"Piston",group:"Kinetic",cells:1},{id:"carousel",label:"Carousel",group:"Kinetic",cells:5},{id:"clockwork",label:"Clockwork",group:"Kinetic",cells:3},{id:"abacus",label:"Abacus",group:"Kinetic",cells:3},{id:"conveyor",label:"Conveyor",group:"Kinetic",cells:3},{id:"pie",label:"Pie",group:"Kinetic",cells:0},{id:"seesaw",label:"Seesaw",group:"Kinetic",cells:1},{id:"roller",label:"Roller",group:"Kinetic",cells:2},{id:"logo-morph",label:"Logo Morph",group:"Premium",cells:3},{id:"card-stack",label:"Card Stack",group:"Premium",cells:3},{id:"progress-ring",label:"Progress Ring",group:"Premium",cells:1},{id:"pill-progress",label:"Pill Progress",group:"Premium",cells:0},{id:"glass-ring",label:"Glass Ring",group:"Premium",cells:0},{id:"orbit-avatar",label:"Orbit Avatar",group:"Premium",cells:5},{id:"checklist",label:"Checklist",group:"Premium",cells:3},{id:"upload-cloud",label:"Upload Cloud",group:"Premium",cells:3},{id:"sync",label:"Sync",group:"Premium",cells:2},{id:"steps",label:"Steps",group:"Premium",cells:4},{id:"spark-line",label:"Spark Line",group:"Premium",cells:2},{id:"ecg",label:"ECG Monitor",group:"Medical",cells:2},{id:"vitals",label:"Vitals",group:"Medical",cells:3},{id:"lungs",label:"Lungs",group:"Medical",cells:1},{id:"capsule",label:"Capsule",group:"Medical",cells:5},{id:"syringe",label:"Syringe",group:"Medical",cells:2},{id:"microscope",label:"Microscope",group:"Medical",cells:4},{id:"cell-divide",label:"Cell Divide",group:"Medical",cells:2},{id:"blood-flow",label:"Blood Flow",group:"Medical",cells:5},{id:"black-hole",label:"Black Hole",group:"Space",cells:0},{id:"eclipse",label:"Eclipse",group:"Space",cells:2},{id:"star-birth",label:"Star Birth",group:"Space",cells:5},{id:"constellation",label:"Constellation",group:"Space",cells:4},{id:"meteor-shower",label:"Meteor Shower",group:"Space",cells:5},{id:"solar-system",label:"Solar System",group:"Space",cells:3},{id:"rocket",label:"Rocket",group:"Space",cells:4},{id:"pulsar",label:"Pulsar",group:"Space",cells:2},{id:"bloom-flower",label:"Flower Bloom",group:"Nature",cells:6},{id:"sprout",label:"Sprout",group:"Nature",cells:3},{id:"tree-grow",label:"Tree Growth",group:"Nature",cells:6},{id:"smoke",label:"Smoke",group:"Nature",cells:4},{id:"tornado",label:"Tornado",group:"Nature",cells:5},{id:"wind",label:"Wind",group:"Nature",cells:4},{id:"butterfly",label:"Butterfly",group:"Nature",cells:2},{id:"honeycomb",label:"Honeycomb",group:"Nature",cells:7},{id:"rainbow",label:"Rainbow",group:"Nature",cells:4},{id:"cloud-form",label:"Cloud Forming",group:"Weather",cells:4},{id:"storm",label:"Storm",group:"Weather",cells:4},{id:"fog",label:"Fog",group:"Weather",cells:4},{id:"sun-clouds",label:"Sun & Clouds",group:"Weather",cells:3},{id:"frost",label:"Frost",group:"Weather",cells:6},{id:"sunbeam",label:"Sunbeam",group:"Weather",cells:0},{id:"thermometer",label:"Thermometer",group:"Weather",cells:2},{id:"battery",label:"Battery",group:"Technology",cells:5},{id:"wifi",label:"Wi-Fi",group:"Technology",cells:3},{id:"signal-tower",label:"Signal Tower",group:"Technology",cells:3},{id:"cpu",label:"CPU",group:"Technology",cells:2},{id:"server-rack",label:"Server Rack",group:"Technology",cells:4},{id:"packets",label:"Network Packets",group:"Technology",cells:3},{id:"data-transfer",label:"Data Transfer",group:"Technology",cells:4},{id:"hard-drive",label:"Hard Drive",group:"Technology",cells:2},{id:"power-plug",label:"Power Plug",group:"Technology",cells:2},{id:"neural-net",label:"Neural Net",group:"AI",cells:7},{id:"ai-think",label:"AI Thinking",group:"AI",cells:3},{id:"synapse",label:"Synapse",group:"AI",cells:3},{id:"ml-train",label:"Model Training",group:"AI",cells:2},{id:"token-stream",label:"Token Stream",group:"AI",cells:7},{id:"attention",label:"Attention",group:"AI",cells:7},{id:"robot-eyes",label:"Robot Eyes",group:"AI",cells:2},{id:"embedding",label:"Embedding",group:"AI",cells:8},{id:"message-send",label:"Message Send",group:"Communication",cells:3},{id:"delivery-ticks",label:"Delivery Ticks",group:"Communication",cells:3},{id:"envelope",label:"Envelope",group:"Communication",cells:3},{id:"bell",label:"Notification Bell",group:"Communication",cells:1},{id:"chat-threads",label:"Chat Threads",group:"Communication",cells:4},{id:"voice-wave",label:"Voice Wave",group:"Communication",cells:2},{id:"mic-listen",label:"Microphone",group:"Communication",cells:3},{id:"translate",label:"Translate",group:"Communication",cells:6},{id:"padlock",label:"Padlock",group:"Security",cells:2},{id:"fingerprint",label:"Fingerprint",group:"Security",cells:4},{id:"face-scan",label:"Face Scan",group:"Security",cells:2},{id:"qr-scan",label:"QR Scan",group:"Security",cells:4},{id:"encrypt",label:"Encryption",group:"Security",cells:6},{id:"key-turn",label:"Key Turn",group:"Security",cells:1},{id:"otp-code",label:"OTP Code",group:"Security",cells:4},{id:"vault",label:"Vault Dial",group:"Security",cells:2},{id:"code-compile",label:"Code Compile",group:"Developer",cells:5},{id:"git-branch",label:"Git Branch",group:"Developer",cells:4},{id:"pipeline",label:"Build Pipeline",group:"Developer",cells:4},{id:"npm-install",label:"Package Install",group:"Developer",cells:5},{id:"container",label:"Container",group:"Developer",cells:4},{id:"k8s-pods",label:"Pod Scaling",group:"Developer",cells:6},{id:"bug-fix",label:"Bug Fix",group:"Developer",cells:5},{id:"code-diff",label:"Code Diff",group:"Developer",cells:5},{id:"db-query",label:"Database Query",group:"Data",cells:4},{id:"db-sync",label:"Database Sync",group:"Data",cells:4},{id:"scatter-plot",label:"Scatter Plot",group:"Data",cells:6},{id:"spreadsheet",label:"Spreadsheet",group:"Data",cells:16},{id:"file-scan",label:"File Scan",group:"Data",cells:4},{id:"folder-scan",label:"Folder Scan",group:"Data",cells:3},{id:"cloud-sync",label:"Cloud Sync",group:"Data",cells:4},{id:"backup",label:"Backup",group:"Data",cells:3},{id:"data-funnel",label:"Data Funnel",group:"Data",cells:5},{id:"payment-card",label:"Payment Card",group:"Finance",cells:3},{id:"coin-flip",label:"Coin Flip",group:"Finance",cells:2},{id:"cart",label:"Shopping Cart",group:"Finance",cells:3},{id:"receipt",label:"Receipt",group:"Finance",cells:6},{id:"stock-candles",label:"Stock Candles",group:"Finance",cells:6},{id:"money-transfer",label:"Money Transfer",group:"Finance",cells:3},{id:"gps-locate",label:"GPS Locate",group:"Transport",cells:3},{id:"route-calc",label:"Route Calc",group:"Transport",cells:4},{id:"compass",label:"Compass",group:"Transport",cells:1},{id:"truck",label:"Delivery Truck",group:"Transport",cells:3},{id:"package-track",label:"Package Tracking",group:"Transport",cells:5},{id:"plane-path",label:"Flight Path",group:"Transport",cells:1},{id:"traffic-light",label:"Traffic Light",group:"Transport",cells:3},{id:"coffee-brew",label:"Coffee Brew",group:"Food",cells:3},{id:"oven-bake",label:"Oven Bake",group:"Food",cells:3},{id:"pizza-slices",label:"Pizza Slices",group:"Food",cells:6},{id:"pan-flip",label:"Pan Flip",group:"Food",cells:1},{id:"blender",label:"Blender",group:"Food",cells:4},{id:"toaster",label:"Toaster",group:"Food",cells:2},{id:"pencil-draw",label:"Pencil Draw",group:"Creative",cells:2},{id:"brush-stroke",label:"Brush Stroke",group:"Creative",cells:2},{id:"palette",label:"Colour Palette",group:"Creative",cells:5},{id:"camera-focus",label:"Camera Focus",group:"Creative",cells:6},{id:"film-strip",label:"Film Strip",group:"Creative",cells:3},{id:"vinyl",label:"Vinyl Record",group:"Creative",cells:1},{id:"book-flip",label:"Book Flip",group:"Creative",cells:3},{id:"typeset",label:"Typeset",group:"Creative",cells:6},{id:"magnetic-field",label:"Magnetic Field",group:"Physics",cells:6},{id:"lightning",label:"Lightning",group:"Physics",cells:2},{id:"electric-arc",label:"Electric Arc",group:"Physics",cells:2},{id:"gravity-well",label:"Gravity Well",group:"Physics",cells:2},{id:"interference",label:"Wave Interference",group:"Physics",cells:4},{id:"pendulum-wave",label:"Pendulum Wave",group:"Physics",cells:7},{id:"newton-disc",label:"Newton Disc",group:"Physics",cells:0},{id:"resonance",label:"Resonance",group:"Physics",cells:3},{id:"health-bar",label:"Health Bar",group:"Gaming",cells:2},{id:"dice-roll",label:"Dice Roll",group:"Gaming",cells:4},{id:"level-up",label:"Level Up",group:"Gaming",cells:4},{id:"coin-collect",label:"Coin Collect",group:"Gaming",cells:3},{id:"chomp",label:"Chomp",group:"Gaming",cells:5},{id:"sprite-march",label:"Sprite March",group:"Gaming",cells:4},{id:"mana-orb",label:"Mana Orb",group:"Gaming",cells:3}],b=[{name:"Spinners",description:"Rings and arcs — the classic shape, modernised."},{name:"Dots",description:"Small, quiet, and good inline with text."},{name:"Bars",description:"Equalizer-style motion with a strong rhythm."},{name:"Shapes",description:"Geometry that morphs, folds, and turns."},{name:"Progress",description:"Wide, indeterminate tracks for page and upload states."},{name:"Grids",description:"Cell fields that pulse, flip, and cascade."},{name:"Pulses",description:"Expanding rings for live, waiting, or listening states."},{name:"Organic",description:"Playful, physical motion with personality."},{name:"Skeletons",description:"Content-shaped placeholders — use these over spinners for page loads."},{name:"Dimensional",description:"Depth, 3D rotation, and orbital motion."},{name:"Neon",description:"Light that hums, blooms, and flickers alight."},{name:"Liquid",description:"Fluid behaviour — filling, pouring, rippling, merging."},{name:"Glitch",description:"Digital damage: tearing, static, dropout, corruption."},{name:"Particles",description:"Fields of small things falling, bursting, drifting, swarming."},{name:"Futuristic",description:"Reticles, reactors, and hardware that does not exist yet."},{name:"Elastic",description:"Spring physics with genuine overshoot and recoil."},{name:"Minimal",description:"Quiet motion for dense UI, toolbars, and inline text."},{name:"Gradient",description:"Colour itself is the animation."},{name:"Kinetic",description:"Mechanisms — gears, cranks, belts, beams, and escapements."},{name:"Premium",description:"Product-grade motion for onboarding, uploads, and sync."},{name:"Medical",description:"Physiology, diagnostics and the clinic."},{name:"Space",description:"Astrophysics — discs, orbits, and things igniting."},{name:"Nature",description:"Growing, burning, blowing and blooming."},{name:"Weather",description:"Sky conditions, from a clear sun to a full storm."},{name:"Technology",description:"Hardware doing its job — power, radio, silicon, disks."},{name:"AI",description:"Models thinking: layers, signals, tokens and clusters."},{name:"Communication",description:"Messages leaving, arriving, and being understood."},{name:"Security",description:"Locks, scans and ciphers doing their checks."},{name:"Developer",description:"The inner loop: compile, branch, build, ship."},{name:"Data",description:"Stores queried, files parsed, records moved."},{name:"Finance",description:"Money changing hands and being checked."},{name:"Transport",description:"Getting there: fixes, routes, wheels and wings."},{name:"Food",description:"Things brewing, baking, tossing and popping."},{name:"Creative",description:"Studio tools: pencils, brushes, lenses and type."},{name:"Physics",description:"Fields, charge, gravity and standing waves."},{name:"Gaming",description:"HUD and pickup motion lifted from games."}],m=c.map(l=>l.id),h=Object.fromEntries(c.map(l=>[l.id,l.cells])),n=(l,s)=>typeof l=="number"?`${l}${s}`:l;function i({variant:l="aurora",size:s=48,speed:t=1,colors:a,label:o="Loading",className:d,style:p,...u}){const r={"--size":n(s,"px"),"--speed":n(t,"s")};return a!=null&&a.length&&(r["--c1"]=a[0],r["--c2"]=a[1%a.length],r["--c3"]=a[2%a.length]),e.jsx("div",{...u,className:["ldr",`ldr--${l}`,d].filter(Boolean).join(" "),style:{...r,...p},role:o?"status":void 0,"aria-label":o??void 0,"aria-hidden":o?void 0:!0,children:Array.from({length:h[l]??0},(B,g)=>e.jsx("span",{},g))})}const S=l=>e.jsx(i,{variant:"aurora",...l}),y=l=>e.jsx(i,{variant:"orbit",...l}),k=l=>e.jsx(i,{variant:"rings",...l}),P=l=>e.jsx(i,{variant:"wave",...l}),f=l=>e.jsx(i,{variant:"bars",...l}),v=l=>e.jsx(i,{variant:"blob",...l}),D=l=>e.jsx(i,{variant:"cube",...l}),C=l=>e.jsx(i,{variant:"spiral",...l}),w=l=>e.jsx(i,{variant:"bar",...l}),G=l=>e.jsx(i,{variant:"grid",...l});exports.Aurora=S;exports.Bar=w;exports.Bars=f;exports.Blob=v;exports.Cube=D;exports.GROUPS=b;exports.Grid=G;exports.LOADER_VARIANTS=m;exports.Loader=i;exports.Orbit=y;exports.Rings=k;exports.Spiral=C;exports.VARIANTS=c;exports.Wave=P;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|