README
nanosplash 🍩
The simple, tiny loading screen
No dependencies, pure JS
Installation
Yarn
yarn add nanosplash
NPM
npm install nanosplash
Import
Import via CDN (recommended)
When you import the IIFE script there is no need to invoke the install
function.
<script src="https://unpkg.com/nanosplash/dist/iife/nanosplash.iife.js">
Modules
When including either ES or CJS modules, you need the CSS in the dist folder, whereas in the IIFE variant, everything is included. If you are using a modern bundler e.g Vite, NextJS, NuxtJS, you can import the CSS directly into your code.
import 'nanosplash/dist/module/style.css'
Location of the stylesheet
Full:
node_modules/nanosplash/dist/module/style.css
Relative:nanosplash/dist/module/style.css
ESM (ES modules)
import { Nanosplash } from 'nanosplash'
CJS (CommonJS)
const Nanosplash = require('nanosplash')
Getting started
Inject Nanosplash into global scope
When imported through the CDN, the instance is already injected into the
Window
object and accessible through the global variableloading
.
If you are importing Nanosplash through modules, invoking the install
function is essential in order to make it react to changes in the browser.
const nanosplash = new Nanosplash()
nanosplash.install()
Basic usage
Display the loading screen
loading.show('Loading the good stuff ...')
Hide the loading screen
loading.hide()
Advanced usage
Display the loading screen inside an element
// Use CSS selector string
loading.show('Loading component ...').inside('#my-element')
// Use HTMLElement objects directly
loading
.show('Loading component ...')
.inside(document.getElementById('my-element'))
// Use functions returning HTMLElement objects
loading
.show('Loading component ...')
.inside(() =>
Array.from(document.querySelectorAll()).filter((element.id = 'my-element'))[0]
)
Combine Nanosplash with async tasks
const task1 = new Promise(r => setTimeout(() => r(), 3000))
const task2 = async () => await getDataFromApi()
loading.show('Loading resources ...').during(task1)
loading.show('Fetching table data ...').inside('#my-table').during(task2)