bower install please-wait
npm install please-wait
Include the please-wait.css file in your <head> tag/in your normal workflow.
You can include the please-wait.js file at the end of your body, but above your other <script> tag(s) if you like. This allows you to use PleaseWait immediately and show a loading page while the browser downloads the rest of your Javascript. Of course, this is optional. Feel free to roll the PleaseWait library into your normal, minified JS file if you prefer.
Optional: If your initial template has some styled HTML by default (like a toolbar), you'll probably want to hide that, or your users could see a quick flash of your normal template, followed by the loading screen. This is easy to do by wrapping the HTML in your body in a div, and hiding/showing that when things are ready. PleaseWait adds a class of 'pg-loaded' to your <body> when it's done.
As soon as possible in your app, call pleaseWait to trigger the loading screen. Right now, the API is quite simple. Valid options are:
backgroundColor - Needs to be a valid CSS color.logo - The URL to a logo to display. The src attribute of an img tag will be set to this value.loadingHtml - HTML to display below the logo. Can be a message, spinner, or any HTML you want. See SpinKit for some great HTML/CSS3 spinners.
Whenever you're app is ready for the user, call finish() on the returned object from the pleaseWait call. This will fade the screen out.
If you want to update the loadingHtml displayed, call updateLoadingHtml(html) on the returned object from pleaseWait. This, by default, will fade the current HTML out and the given HTML in. This is useful if you want to cycle through messages (in case your app takes a good bit of time to load), show a login form within the loading screen, etc.