![\"npm](\"https://img.shields.io/npm/v/nanosplash?label=npm\")
\n ![\"npm](\"https://img.shields.io/npm/dw/nanosplash\")
\n ![\"bundle](\"https://img.shields.io/bundlejs/size/nanosplash?label=gzipped\")
\n ![\"CI](\"https://github.com/isakhauge/nanosplash/actions/workflows/ci.yml/badge.svg\"){kind=icon}
\n ![\"Coverage](\"https://coveralls.io/repos/github/isakhauge/nanosplash/badge.svg?branch=main\"){kind=icon}
\n ![\"TypeScript](\"https://img.shields.io/badge/TypeScript-ready-3178c6?logo=typescript&logoColor=white\"){kind=icon}
\n ![\"MIT](\"https://img.shields.io/github/license/isakhauge/nanosplash?color=green\")
\nThe tiny loading screen for web artisans
\n\n\n \n \n
\n ![\"Nanosplash](\"https://raw.githubusercontent.com/isakhauge/nanosplash/main/assets/demo.svg\")
\n
\n Live demo\n · \n Full documentation\n · \n Changelog\n
\n\n## Why Nanosplash\n\n- **~2.6 kB gzipped.** Smaller than most icons. Nothing else to ship.\n- **Zero dependencies.** Plain TypeScript, plain CSS, injected once on first use.\n- **Framework-agnostic.** Works in vanilla JS, React, Vue, Svelte, Angular, or any plain `\n```\n\n## Quick start\n\n```js\nimport { useNs } from 'nanosplash'\n\nconst ns = useNs()\n\nns.show('Loading')\n// ...do work...\nns.hide()\n```\n\n## Usage\n\n### Fullscreen or scoped to an element\n\n```js\nns.show() // fullscreen spinner, no text\nns.show('Loading') // fullscreen spinner with a label\nns.show('Fetching data', '#dashboard') // inside an element, by CSS selector\nns.show('Please wait', document.querySelector('.card')) // by element reference\n```\n\nCalling `show()` again on the same container updates the label instead of stacking a second spinner. The fullscreen splash never touches the page's scroll position.\n\n### Run work under a splash\n\nPass a `[label, job]` pair and the splash lives exactly as long as the job. Pass several pairs and they run in order under one splash, with the label updating as each step starts. Results come back as a typed tuple.\n\n```js\nconst user = await ns.show(['Loading user', () => fetchUser()])\n\nconst [profile, posts] = await ns.show([\n ['Loading user', () => fetchUser()],\n ['Loading posts', () => fetchPosts()],\n])\n```\n\nRejections propagate after the splash is hidden, so a normal `try`/`catch` works.\n\n### Hide\n\n```js\nns.hide() // hide the oldest active splash\nns.hide(id) // hide one specific splash, using the id returned by show()\nns.hide('*') // hide every active splash\n```\n\n### Anti-flicker timing\n\nConfigure once and every splash from that instance follows the same rules. The splash stays invisible for `showDelay` ms and, once visible, stays for at least `minDuration` ms. Requests that finish inside the delay never show a spinner at all.\n\n```js\nconst ns = useNs({ showDelay: 150, minDuration: 400 })\n```\n\n## Theming\n\nNanosplash ships light and dark defaults that follow `prefers-color-scheme`, with a `data-theme=\"light|dark\"` attribute on the root element as an override. All defaults are declared at zero specificity, so any rule of yours wins regardless of load order.\n\n```css\n:root {\n --ns-color: tomato;\n --ns-size: 24px;\n --ns-bg: rgba(0, 0, 0, 0.8);\n}\n\n/* Theme only the loaders inside one panel */\n#dashboard {\n --ns-color: white;\n --ns-bg: rgba(0, 0, 0, 0.6);\n}\n```\n\n| Property | Default | Controls |\n| ------------------- | ------------------------------- | ------------------------------------- |\n| `--ns-color` | `DarkSlateGray` | Spinner and text color |\n| `--ns-size` | `20px` | Base size; the spinner scales from it |\n| `--ns-font` | `'Inter', 'Helvetica', 'Arial'` | Label font stack |\n| `--ns-weight` | `400` | Label font weight |\n| `--ns-bg` | `rgba(255, 255, 255, 0.9)` | Overlay background |\n| `--ns-blur` | `blur(5px)` | Backdrop blur |\n| `--ns-shadow-color` | `rgba(0, 0, 0, 0.25)` | Text and spinner shadow |\n| `--ns-z-index` | `9999999999` | Overlay z-index |\n\n## Accessibility\n\n- The splash has `role=\"status\"` and `aria-live=\"polite\"`, so the label is announced when it appears or changes.\n- The host container gets `aria-busy=\"true\"` while a splash is active and loses it on hide.\n- Under `prefers-reduced-motion: reduce`, fades and entrance animations are disabled and the spinner rotates slowly with a static arc.\n\n## API at a glance\n\n| Call | Returns | Description |\n| ---------------------------------- | ------------------------- | --------------------------------------------------------------------------- |\n| `useNs(options?)` | `{ show, hide, version }` | Create an API instance. `options` sets `showDelay` and `minDuration`. |\n| `show(label?, inside?)` | `number \\| null` | Show a splash. Returns its id, or `null` if `inside` could not be resolved. |\n| `show([label, job], inside?)` | `Promise