PleaseWait.js

A simple library to show your users a beautiful splash page while your application loads.

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.

<!DOCTYPE html>
<html ng-app="AngularApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="assets/css/please-wait.css" rel="stylesheet">
<link href="assets/css/default.css" rel="stylesheet">
</head>
<body ng-controller="MainCtrl">
<div class="inner" ng-view>
</div>
<script type="text/javascript" src="assets/js/please-wait.min.js"></script>
<script type="text/javascript">
window.loading_screen = window.pleaseWait({
logo: "assets/images/logo.png",
backgroundColor: '#f46d3b',
loadingHtml: "<p class='loading-message'>A good day to you fine user!</p>"
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<!-- If we include the rest of our JS after we call pleaseWait, users get a loading page while it downloads.
Of course, this is optional and up to you. It may be desired if your combined JS is of a larger size. If not,
feel free to include PleaseWait in your normal minified JS file, and call pleaseWait when first possible. -->
<script src="assets/js/default.min.js"></script>
</body>
</html>
view raw index.html hosted with ❤ by GitHub

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.

body > .inner {
display: none;
}
body.pg-loaded > .inner {
display: block;
}
view raw default.css hosted with ❤ by GitHub

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.
  • 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.
pleaseWait returns the loading screen when called. You'll want to save this in order to close the loading screen later.

var loading_screen = pleaseWait({
logo: "assets/images/pathgather.png",
backgroundColor: '#f46d3b',
loadingHtml: "<div class='sk-spinner sk-spinner-wave'><div class='sk-rect1'></div><div class='sk-rect2'></div><div class='sk-rect3'></div><div class='sk-rect4'></div><div class='sk-rect5'></div></div>"
});
view raw load.js hosted with ❤ by GitHub

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.

Bonus Section! Update the HTML

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.