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: about 1 year 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 (almost 5 years ago)
- Default Branch: production
- Last Pushed: 2024-03-24T23:31:52.000Z (about 2 years ago)
- Last Synced: 2025-04-05T00:01:31.291Z (about 1 year 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: 2
- 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
[](https://github.com/isakhauge/nanosplash/actions/workflows/ci.prod.yml)
[](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)