splash-screen

A splash screen is required from end-user's perspective while developing SPA based application, cause that static resources usually concatenated into only one file in production release which might cost few seconds in loading phase.

A splash screen is great to be loaded parallel with the application part. Once the application part loaded, destroy splash-screen and display the application.

Install

bower

bower install --save splash-screen

npm

npm install splash-screen

Usage

Import CSS

<!-- all-in-one-css -->
<link rel="stylesheet" type="text/css" href="node_modules/splash-screen/dist/splash-screen.min.css">

<!-- specific-theme-css -->
<link rel="stylesheet" type="text/css" href="node_modules/splash-screen/dist/splash-screen-[theme].min.css">

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>

Themes

Multiple themes can be used while enable splash. Available themes: tailing, windcatcher, audio-wave, spinner-section, spinner-section-far, circular.

You would like to see real demo: splash-screen

LICENSE

MIT License