loading-state-zoo 0.3.0 → 0.4.1

package/README.md

@@ -1,6 +1,8 @@
 # loading-state-zoo
 
-**32 loading patterns, one tiny package.** Dots, spinners, orbs, shapes, bars, music and skeletons that tell the user "please wait" — made silky smooth and ready to use in **React**, **plain websites**, and **iOS / Android apps**.
+**26 loading patterns, one tiny package.** Dots, spinners, orbs, shapes, bars, music and skeletons that tell the user "please wait" — made silky smooth and ready to use in **React**, **plain websites**, and **iOS / Android apps**.
+
+> **Recommended production version.** v0.4.1 is the stable, production-tested line of `loading-state-zoo`. Install `npm i loading-state-zoo@^0.4.1` for the latest recommended release.
 
 Think of it as a small zoo of loading animals. You pick an animal, put it in your app's cage, and it starts moving right away. You can even change its **color**, **size** and **speed** — no scissors or glue required.
 
@@ -28,12 +30,7 @@ Think of it as a small zoo of loading animals. You pick an animal, put it in you
 | [Scan sweep](#scan-sweep) | Spinner | Radar/sonar, scanning, searching |
 | [Orbit dots](#orbit-dots) | Spinner | Floaty, lightweight loading |
 | [Orbit ring dots](#orbit-ring-dots) | Spinner | Cosmetic ring, data-heavy load |
-| [Pulsing orb](#pulsing-orb) | Orbs | Ambient loads, hero panels, splash |
-| [Morphing orb](#morphing-orb) | Orbs | Creative waits, brand moments |
-| [Siri orb](#siri-orb) | Orbs | Voice assistants, AI thinking |
-| [Dot orb](#dot-orb) | Orbs | Orbit waits, spatial loading |
-| [Planet orb](#planet-orb) | Orbs | Space motifs, sci-fi waits |
-| [Aura orb](#aura-orb) | Orbs | Gradient waits, brand palettes |
+| [Sonar](#sonar) | Spinner | Radar pings, location detection |
 | [Eyes](#eyes) | Shape | Fun state, "watching" waiting |
 | [Morphing square](#morphing-square) | Shape | Modern brand moments |
 | [Breathing pulse](#breathing-pulse) | Shape | Subtle, gentle "alive" loading |
@@ -44,7 +41,6 @@ Think of it as a small zoo of loading animals. You pick an animal, put it in you
 | [Activity rings](#activity-rings) | Bars & rings | Fitness, health, Apple Watch style |
 | [Waveform](#waveform) | Music | Audio apps, playing states |
 | [Vinyl](#vinyl) | Music | Music apps, retro feels |
-| [Sonar](#sonar) | Music | Audio pulses, location pings |
 | [Music note](#music-note) | Music | Music players, playful waits |
 | [Skeleton shimmer](#skeleton-shimmer) | Skeleton | Placeholder while real content loads |
 | [Skeleton card](#skeleton-card) | Skeleton | Composite card/feed placeholders |
@@ -85,7 +81,7 @@ export function MyLoader() {
 }
 ```
 
-That's it. Importing the package **automatically registers** all 32 elements for you (it's safe to import in many places — duplicates are skipped). It is also safe on the server (SSR/Next.js): on Node there is no browser, so nothing registers and nothing breaks.
+That's it. Importing the package **automatically registers** all 26 elements for you (it's safe to import in many places — duplicates are skipped). It is also safe on the server (SSR/Next.js): on Node there is no browser, so nothing registers and nothing breaks.
 
 If you prefer to register manually:
 
@@ -113,7 +109,7 @@ Add the package from a CDN (or bundle it) and write the tags directly in your HT
 </div>
 ```
 
-Mix and match any of the 32 tags — see the full list below.
+Mix and match any of the 26 tags — see the full list below.
 
 ---
 
@@ -237,9 +233,6 @@ Every number inside every animation is also a CSS variable. Change how far dots
 | `--lz-eq-min` | Equalizer | Shortest bar height | `0.3` |
 | `--lz-slide-from` | Indeterminate bar | Slider start position | `-100%` |
 | `--lz-slide-to` | Indeterminate bar | Slider end position | `300%` |
-| `--lz-orb-scale` | Pulsing orb | Peak breathe scale | `1.16` |
-| `--lz-orb-fade` | Pulsing orb / dot orb | Mid-breathe opacity (dot orb rests at `0.14`) | `0.88` |
-| `--lz-dot-min` | Dot orb | Resting dot scale | `0.7` |
 | `--lz-wf-min` | Waveform | Resting bar scale | `0.22` |
 | `--lz-sonar-fade` | Sonar | Ring start opacity | `0.9` |
 | `--lz-note-bob` | Music note | Note bob height | `0.35em` |
@@ -397,7 +390,7 @@ Variables: `--lz-stroke` · `--lz-color-weak`.
 
 ### Scan sweep
 
-**What it is:** concentric rings with a sweeping beam — like radar. **Good for:** scanning, searching, syncing data.
+**What it is:** concentric rings with crosshair ticks, a counter-rotating dial and a sweeping beam — like a radar. **Good for:** scanning, searching, syncing data.
 
 ```html
 <lz-scan-sweep size="64" color="#30d158"></lz-scan-sweep>
@@ -446,104 +439,6 @@ Variables: `--lz-dot-size` · `--lz-orbit-fade`.
 
 ---
 
-### Pulsing orb
-
-**What it is:** a glowing gradient orb that breathes in and out. **Good for:** ambient loads, hero panels, app splash screens.
-
-```html
-<lz-pulsing-orb size="64" accent="#ff375f"></lz-pulsing-orb>
-```
-
-```tsx
-<PulsingOrb size={64} accent="#ff375f" />
-```
-
-Attributes: `size` (default `44`) · `accent` (default `#0a84ff`) · `speed`.
-Variables: `--lz-orb-scale` · `--lz-orb-fade`.
-
----
-
-### Morphing orb
-
-**What it is:** a blob that endlessly morphs its silhouette between rounded shapes. **Good for:** creative waits, brand moments, game loading.
-
-```html
-<lz-morphing-orb size="64" accent="#30d158"></lz-morphing-orb>
-```
-
-```tsx
-<MorphingOrb size={64} accent="#30d158" />
-```
-
-Attributes: `size` (default `44`) · `accent` (default `#0a84ff`) · `speed`.
-
----
-
-### Siri orb
-
-**What it is:** a Siri-style orb with a multicolored sheen swirling inside a clipped circle. **Good for:** voice assistants, AI "thinking", smart waits.
-
-```html
-<lz-siri-orb size="72" accent="#64d2ff"></lz-siri-orb>
-```
-
-```tsx
-<SiriOrb size={72} accent="#64d2ff" />
-```
-
-Attributes: `size` (default `44`) · `accent` (default `#0a84ff`) · `speed`.
-
----
-
-### Dot orb
-
-**What it is:** a ring of shimmering dots arranged into an orb silhouette. **Good for:** orbit waits, spatial loading, gaming screens.
-
-```html
-<lz-dot-orb count="12" color="#ff9f0a"></lz-dot-orb>
-```
-
-```tsx
-<DotOrb count={12} color="#ff9f0a" />
-```
-
-Attributes: `size` (default `44`) · `count` (default `8`) · `color` · `speed`.
-Variables: `--lz-dot-min` · `--lz-orb-fade`.
-
----
-
-### Planet orb
-
-**What it is:** a glowing planet core with small moons orbiting it. **Good for:** space motifs, science apps, sci-fi waits.
-
-```html
-<lz-planet-orb count="3" accent="#bf5af2" color="#64d2ff"></lz-planet-orb>
-```
-
-```tsx
-<PlanetOrb count={3} accent="#bf5af2" color="#64d2ff" />
-```
-
-Attributes: `size` (default `44`) · `accent` (default `#0a84ff`) · `color` · `count` (moons, default `2`) · `speed`.
-
----
-
-### Aura orb
-
-**What it is:** two tinted orbs counter-rotating in overlapping orbits. **Good for:** gradient waits, brand palettes, hero backgrounds.
-
-```html
-<lz-aura-orb accent="#ff375f" color="#64d2ff"></lz-aura-orb>
-```
-
-```tsx
-<AuraOrb accent="#ff375f" color="#64d2ff" />
-```
-
-Attributes: `size` (default `44`) · `accent` (default `#0a84ff`) · `color` · `speed`.
-
----
-
 ### Eyes
 
 **What it is:** two cartoon eyes that look side to side and blink. **Good for:** fun apps, "watching" moments, kids' stuff.
@@ -703,7 +598,7 @@ Variables: `--lz-bar-width` · `--lz-gap` · `--lz-wf-min`.
 
 ### Vinyl
 
-**What it is:** a spinning record with a gently bobbing tonearm. **Good for:** music apps, retro waits, album screens.
+**What it is:** a spinning record with a light sheen, label, spindle and a gently bobbing tonearm. **Good for:** music apps, retro waits, album screens.
 
 ```html
 <lz-vinyl accent="#fa114f"></lz-vinyl>
@@ -719,7 +614,7 @@ Attributes: `size` (default `48`) · `accent` (label/stylus, default `#0a84ff`)
 
 ### Sonar
 
-**What it is:** a pulsing core emitting expanding sonar rings. **Good for:** audio pulses, location pings, motion waits.
+**What it is:** a pulsing core emitting expanding sonar rings. **Good for:** radar pings, location detection, motion waits.
 
 ```html
 <lz-sonar count="4" accent="#30d158"></lz-sonar>
@@ -736,7 +631,7 @@ Variables: `--lz-sonar-fade`.
 
 ### Music note
 
-**What it is:** musical note glyphs bobbing in a sing-song rhythm. **Good for:** music players, karaoke, playful waits.
+**What it is:** drawn musical notes with heads, stems and flags bobbing in a sing-song rhythm. **Good for:** music players, karaoke, playful waits.
 
 ```html
 <lz-music-note count="3" color="#bf5af2"></lz-music-note>