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
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.