nanosplash 4.0.3 → 4.0.5

package/README.md

@@ -1,90 +1,156 @@
 # Nanosplash
 
-### The tiny loading screen for web artisans
+**The tiny loading screen for web artisans**
 
-<br>
+[![CI Production: Build, Test, Publish](https://github.com/isakhauge/nanosplash/actions/workflows/ci.prod.push.yml/badge.svg)](https://github.com/isakhauge/nanosplash/actions/workflows/ci.prod.yml)
+[![Coverage Status](https://coveralls.io/repos/github/isakhauge/nanosplash/badge.svg?branch=production)](https://coveralls.io/github/isakhauge/nanosplash?branch=production)
 
-[![Build](https://github.com/isakhauge/nanosplash/actions/workflows/ci.prod.yml/badge.svg?branch=production)](https://github.com/isakhauge/nanosplash/actions/workflows/ci.prod.yml)
-[![codecov](https://codecov.io/gh/isakhauge/nanosplash/graph/badge.svg?token=KDUC5H82UE)](https://codecov.io/gh/isakhauge/nanosplash)
+---
 
-## 💖 Documentation
+## 🚀 Introduction
 
-[isakhauge.github.io/nanosplash/](https://isakhauge.github.io/nanosplash/)
+Nanosplash provides a lightweight and customizable loading screen for your web applications. Whether you want a simple spinner or a fully branded loading experience, Nanosplash makes it easy to implement and customize.
 
-## 🚀 Usage
+---
 
-### Show
+## ✨ Features
 
-#### Spinner only
+- 🔬 Tiny size: Only 3KB – ideal for lean, fast applications.
+- ⚡ High performance: Engineered for speed and responsiveness.
+- ✅ Zero dependencies: No extra baggage – pure JavaScript!
+- 🎨 Minimalistic design: Easily integrates with other designs.
+- 🚚 Exports in multiple formats: Supports ESM, CJS, and IIFE.
+- 📘 TypeScript support: Fully typed. Better DX.
+- ✌️ 2 Function API: Small, simple – just what you need.
 
-Fullscreen Nanosplash with spinner only.
+---
 
-```js
-ns.show()
+## 📦 Installation
+
+Include Nanosplash in your project via your preferred method (e.g., CDN, module bundler). Example:
+
+```html
+<script src="https://unpkg.com/nanosplash/dist/iife/ns.iife.js"></script>
 ```
 
-Nanosplash inside the given element with spinner only.
+or
 
-```js
-ns.show(null, '#my-div')
+```bash
+npm install nanosplash
 ```
 
-#### Text and spinner
+---
 
-Fullscreen Nanosplash with text and spinner.
+## 🎯 API Documentation
 
-```js
-ns.show('Hi')
-```
+### `ns.show(text?, target?)`
 
-Nanosplash inside the given element with text and spinner.
+Displays a Nanosplash.
 
-```js
-ns.show('Hi', '#my-div')
-```
+| Parameter | Type                             | Description                                                 |
+|-----------|----------------------------------|-------------------------------------------------------------|
+| `text`    | `string \| undefined`            | Optional. Text to display alongside the spinner.            |
+| `target`  | `string \| Element \| undefined` | Optional. CSS selector or an element to contain the splash. |
 
-### Hide
+#### Examples:
 
-#### Agnostic (FIFO)
+- **Fullscreen spinner only:**
 
-Remove the oldest Nanosplash residing inside the window body.
+  ```js
+  ns.show()
+  ```
 
-```js
-ns.hide()
-```
+- **Fullscreen text and spinner:**
 
-#### Specific
+  ```js
+  ns.show('Loading...')
+  ```
 
-Remove a specific Nanosplash by its ID.
+- **Spinner only within a specific element:**
 
-```js
-ns.hide(id)
-```
+  ```js
+  ns.show(null, '#my-div')
+  ```
 
-#### All
+- **Text and spinner within a specific element:**
 
-Remove all Nanosplashes.
+  ```js
+  ns.show('Please wait', '#my-div')
+  ```
 
-```js
-ns.hide('*')
-```
+---
+
+### `ns.hide(id?)`
+
+Hides or removes a Nanosplash.
+
+| Parameter | Type                  | Description                                                |
+|-----------|-----------------------|------------------------------------------------------------|
+| `id`      | `number \| undefined` | Optional. The ID of the Nanosplash to remove.              |
+
+#### Examples:
+
+- **Remove the oldest (FIFO) fullscreen Nanosplash:**
 
-## 🦄 Customization
+  ```js
+  ns.hide()
+  ```
 
-You can easily make Nanosplash look the way you want.
+- **Remove a specific Nanosplash by ID:**
 
-```scss
-// Backdrop selector
-.nsh::before
+  ```js
+  const id = ns.show() // 1700000000000
+  ns.hide(id)
+  ```
 
-// Main wrapper selector
-.ns
+- **Remove all Nanosplashes:**
 
-// Text selector
-.nst
+  ```js
+  ns.hide('*')
+  ```
 
-// Spinner selector
-.nss
+---
+
+## 🎨 Customization
+
+Nanosplash is designed to be fully customizable with CSS. You can style its key parts using these selectors:
+
+| Selector        | Description                              |
+|------------------|------------------------------------------|
+| `.nsh::before`  | Backdrop                                  |
+| `.ns`           | Main wrapper for the splash               |
+| `.nst`          | Text element                              |
+| `.nss`          | Spinner element                           |
+
+---
+
+## 🛠️ Examples
+
+Here’s a quick snippet to show a loading indicator while fetching data:
+
+```html
+<div id="my-div"></div>
+
+<script>
+  // Show a splash while loading
+  ns.show('Fetching data...', '#my-div')
+
+  fetch('/api/data')
+    .then(res => res.json())
+    .then(data => {
+      // Process data
+    })
+    .finally(() => {
+      // Hide splash
+      ns.hide()
+    })
+</script>
 ```
 
-Read more here: [Customization](https://isakhauge.github.io/nanosplash/api/start/customize.html)
+---
+
+## 💖 Contributing & Feedback
+
+Found a bug or have a feature request? Visit the [GitHub repository](https://github.com/isakhauge/nanosplash) and open an issue or pull request!
+
+---