❤
npm
Sign UpSign In

splash-screen
TypeScript icon, indicating that this package has built-in type declarations

4.0.1 • Public • Published

splash-screen

NPM version

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

Readme

Keywords

Package Sidebar

Install

npm i splash-screen

Repository

github.com/leftstick/splash-screen

Homepage

github.com/leftstick/splash-screen

Weekly Downloads

81

Version

4.0.1

License

GPL-3.0

Last publish

Collaborators

  • howard.zuo
Try on RunKit
Report malware