Nanosplash

The tiny loading screen for web artisans

💖 Documentation

isakhauge.github.io/nanosplash/

🚀 Usage

Show

Spinner only

Fullscreen Nanosplash with spinner only.

ns.show()

Nanosplash inside the given element with spinner only.

ns.show(null, '#my-div')

Text and spinner

Fullscreen Nanosplash with text and spinner.

ns.show('Hi')

Nanosplash inside the given element with text and spinner.

ns.show('Hi', '#my-div')

Hide

Agnostic (FIFO)

Remove the oldest Nanosplash residing inside the window body.

ns.hide()

Specific

Remove a specific Nanosplash by its ID.

ns.hide(id)

All

Remove all Nanosplashes.

ns.hide('*')

🦄 Customization

You can easily make Nanosplash look the way you want.

// Backdrop selector
.nsh::before

// Main wrapper selector
.ns

// Text selector
.nst

// Spinner selector
.nss

Read more here: Customization