https://github.com/isakhauge/nanosplash

The tiny loading screen for web artisans
https://github.com/isakhauge/nanosplash

javascript loader loading loading-indicator loading-screen loading-spinner spinner spinners splash splash-screen splashscreen typescript vanilla-js

Last synced: 3 months ago
JSON representation

The tiny loading screen for web artisans

• Host: GitHub
• URL: https://github.com/isakhauge/nanosplash
• Owner: isakhauge
• License: mit
• Created: 2021-07-05T13:51:58.000Z (over 3 years ago)
• Default Branch: production
• Last Pushed: 2024-03-24T23:31:52.000Z (10 months ago)
• Last Synced: 2024-11-01T06:42:32.233Z (3 months ago)
• Topics: javascript, loader, loading, loading-indicator, loading-screen, loading-spinner, spinner, spinners, splash, splash-screen, splashscreen, typescript, vanilla-js
• Language: TypeScript
• Homepage: https://isakhauge.github.io/nanosplash/
• Size: 5.41 MB
• Stars: 16
• Watchers: 3
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Nanosplash

### The tiny loading screen for web artisans




[![CI Production - Build, Test, Publish](https://github.com/isakhauge/nanosplash/actions/workflows/ci.prod.yml/badge.svg)](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

[isakhauge.github.io/nanosplash/](https://isakhauge.github.io/nanosplash/)

## 🚀 Usage

### Show

#### Spinner only

Fullscreen Nanosplash with spinner only.

```js

ns.show()

```

Nanosplash inside the given element with spinner only.

```js

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

```

#### Text and spinner

Fullscreen Nanosplash with text and spinner.

```js

ns.show('Hi')

```

Nanosplash inside the given element with text and spinner.

```js

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

```

### Hide

#### Agnostic (FIFO)

Remove the oldest Nanosplash residing inside the window body.

```js

ns.hide()

```

#### Specific

Remove a specific Nanosplash by its ID.

```js

ns.hide(id)

```

#### All

Remove all Nanosplashes.

```js

ns.hide('*')

```

## 🦄 Customization

You can easily make Nanosplash look the way you want.

```scss

// Backdrop selector

.nsh::before

// Main wrapper selector

.ns

// Text selector

.nst

// Spinner selector

.nss

```

Read more here: [Customization](https://isakhauge.github.io/nanosplash/api/start/customize.html)