To Use

Step 1: Install bower install please-wait

npm install please-wait

Step 2: Include in your HTML 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.

Step 3: Hide initial HTML flash 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.

Step 4: Show the loading screen 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.

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

- The URL to a logo to display. The attribute of an 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. pleaseWait returns the loading screen when called. You'll want to save this in order to close the loading screen later. pleaseWait returns the loading screen when called. You'll want to save this in order to close the loading screen later.

Step 5: Close the loading screen 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.