splash-screen

Simple splash

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
splash-screen
3504.0.17 years ago9 years agoMinified + gzip package size for splash-screen in KB

Readme

splash-screen
!bower-url !NPM versionnpm-imagenpm-url !david-url !dt-url !license-url
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, destory } from 'splash-screen';

//enable with a specific theme.
//Possible themes are: 'tailing', 'audio-wave', 'windcatcher', 'spinner-section', 'spinner-section-far', 'circular'.
enable('tailing');

//destory the splash
destory();

//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, destory } from 'splash-screen/dist/splash-screen-[theme]';

//enable with no arg
enable();

//destory the splash
destory();

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, destory} = require('splash-screen');

//enable with a specific theme.
//Possible themes are: 'tailing', 'audio-wave', 'windcatcher', 'spinner-section', 'spinner-section-far', 'circular'.
enable('tailing');

//destory the splash
destory();

//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, destory} = require('splash-screen/dist/splash-screen-[theme]');

//enable with no arg.
enable();

//destory the splash
destory();

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');

    //destory the splash
    splash.destory();
</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();
    
    //destory the splash
    theme.destory();
</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