nanosplash

The simple, 2KB loading screen

Usage no npm install needed!

<script type="module">
  import nanosplash from 'https://cdn.skypack.dev/nanosplash';
</script>

README

nanosplash 🍩

npm Minified+gzip size Minified size Tree shaking

npm maintenance score npm quality score npm final score npm popularity score

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 variable loading.

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)

If you like it, give it a star! ⭐️