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.
It is already used in http://www.hfworks.cn
bower install --save splash-screen
npm install --save splash-screen
<link rel="stylesheet" type="text/css" href="node_modules/splash-screen/dist/splash.min.css">
ES2015
import {Splash} from 'splash-screen';
CommonJS
var Splash = require('splash-screen').Splash;
Script
<script type="text/javascript" src="node_modules/splash-screen/dist/splash.min.js"></script>
<script type="text/javascript">
var Splash = window.Splash;
</script>
Splash.enable('windcatcher'); //launch the splash-screen while needed
Splash.isRunning(); //detect if there is a splash running on the window
Splash.destroy();//destroy the splash-screen on demand
Multiple themes can be used while enable splash. Available themes: tailing
, windcatcher
, audio-wave
, spinner-section
, spinner-section-far
, circular
.
See full featured demo: splash-screen