Splash Screen

The easiest splash library you need for creating SPA

tailing

ENABLE

DESTROY

audio-wave

ENABLE

DESTROY

circular

ENABLE

DESTROY

spinner-section

ENABLE

DESTROY

spinner-section-far

ENABLE

DESTROY

windcatcher

ENABLE

DESTROY

---

Version

There are 4 major versions available, and each of them is not backwards compatible. Which means you should not writing codes at version 1's instruction, but with version 2 installed. Below are documentation references for previous version:

• version < 4

---

Install

npm

npm install splash-screen

bower

bower install splash-screen

---

Usage

Typescript

//import all-in-one-bundle
//import splash-screen/dist/splash-screen.min.css here if you are using webpack, or inject it in your html
import { enable, destroy } from 'splash-screen';
//enable with a specific theme.
//Possible themes are: 'tailing', 'audio-wave', 'windcatcher', 'spinner-section', 'spinner-section-far', 'circular'.
enable('tailing');
//destroy the splash
destroy();

//import specific bundle
//import splash-screen/dist/splash-screen-[theme].min.css here if you are using webpack, or inject it in your html
import { enable, destroy } from 'splash-screen/dist/splash-screen-[theme]';
//enable with no arg
enable();
//destroy the splash
destroy();

ES2015

Same as above

CommonJS

//import all-in-one-bundle
//import splash-screen/dist/splash-screen.min.css here if you are using webpack, or inject it in your html
const {enable, destroy} = require('splash-screen');
//enable with a specific theme.
//Possible themes are: 'tailing', 'audio-wave', 'windcatcher', 'spinner-section', 'spinner-section-far', 'circular'.
enable('tailing');
//destroy the splash
destroy();

//import specific bundle
//import splash-screen/dist/splash-screen-[theme].min.css here if you are using webpack, or inject it in your html
const {enable, destroy} = require('splash-screen/dist/splash-screen-[theme]');
//enable with no arg.
enable();
//destroy the splash
destroy();

Script

<!-- import all-in-one-bundle -->
<link rel="stylesheet" href="node_modules/splash-screen/dist/splash-screen.min.css">
<script src="node_modules/splash-screen/dist/splash-screen.min.js"></script>

<script>
    const splash = window['splash-screen'];
    //enable with a specific theme.
    //Possible themes are: 'tailing', 'audio-wave', 'windcatcher', 'spinner-section', 'spinner-section-far', 'circular'.
    splash.enable('tailing');
    //destroy the splash
    splash.destroy();
</script>

<!-- import specific bundle -->
<link rel="stylesheet" href="node_modules/splash-screen/dist/splash-screen-[theme].min.css">
<script src="node_modules/splash-screen/dist/splash-screen-[theme].min.js"></script>

<script>
    const theme = window['splash-screen-[theme]'];
    //enable with no arg.
    theme.enable();
    //destroy the splash
    theme.destroy();
</script>