Added a class to the body when loading so we can hide overflow

build/please-wait.css

@@ -9,6 +9,11 @@ body.pg-loaded {
 }
 
 /* line 22, ../src/please-wait.scss */
+body.pg-loading {
+  overflow: hidden;
+}
+
+/* line 26, ../src/please-wait.scss */
 .pg-loading-screen {
   position: fixed;
   bottom: 0;
@@ -24,7 +29,7 @@ body.pg-loaded {
   -o-transition: background-color 0.6s ease-in-out 0s;
   transition: background-color 0.6s ease-in-out 0s;
 }
-/* line 33, ../src/please-wait.scss */
+/* line 37, ../src/please-wait.scss */
 .pg-loading-screen.pg-loaded {
   opacity: 0;
   -webkit-animation: pgAnimLoaded 0.5s cubic-bezier(0.7, 0, 0.3, 1) both;
@@ -33,35 +38,35 @@ body.pg-loaded {
   -o-animation: pgAnimLoaded 0.5s cubic-bezier(0.7, 0, 0.3, 1) both;
   animation: pgAnimLoaded 0.5s cubic-bezier(0.7, 0, 0.3, 1) both;
 }
-/* line 39, ../src/please-wait.scss */
+/* line 43, ../src/please-wait.scss */
 .pg-loading-screen.pg-loading .pg-loading-logo-header, .pg-loading-screen.pg-loading .pg-loading-html {
   opacity: 1;
 }
-/* line 43, ../src/please-wait.scss */
+/* line 47, ../src/please-wait.scss */
 .pg-loading-screen.pg-loading .pg-loading-logo-header, .pg-loading-screen.pg-loading .pg-loading-html {
   -webkit-animation: pgAnimLoading 1s cubic-bezier(0.7, 0, 0.3, 1) both;
   -moz-animation: pgAnimLoading 1s cubic-bezier(0.7, 0, 0.3, 1) both;
   -ms-animation: pgAnimLoading 1s cubic-bezier(0.7, 0, 0.3, 1) both;
   -o-animation: pgAnimLoading 1s cubic-bezier(0.7, 0, 0.3, 1) both;
   animation: pgAnimLoading 1s cubic-bezier(0.7, 0, 0.3, 1) both;
 }
-/* line 47, ../src/please-wait.scss */
+/* line 51, ../src/please-wait.scss */
 .pg-loading-screen.pg-loading .pg-loading-html {
   -webkit-animation-delay: 0.3s;
   -moz-animation-delay: 0.3s;
   -ms-animation-delay: 0.3s;
   -o-animation-delay: 0.3s;
   animation-delay: 0.3s;
 }
-/* line 52, ../src/please-wait.scss */
+/* line 56, ../src/please-wait.scss */
 .pg-loading-screen .pg-loading-inner {
   height: 100%;
   width: 100%;
   margin: 0;
   padding: 0;
   position: static;
 }
-/* line 60, ../src/please-wait.scss */
+/* line 64, ../src/please-wait.scss */
 .pg-loading-screen .pg-loading-center-outer {
   width: 100%;
   padding: 0;
@@ -72,32 +77,32 @@ body.pg-loaded {
   left: 0;
   margin: 0;
 }
-/* line 71, ../src/please-wait.scss */
+/* line 75, ../src/please-wait.scss */
 .pg-loading-screen .pg-loading-center-middle {
   padding: 0;
   vertical-align: middle;
   display: table-cell  !important;
   margin: 0;
   text-align: center;
 }
-/* line 79, ../src/please-wait.scss */
+/* line 83, ../src/please-wait.scss */
 .pg-loading-screen .pg-loading-logo-header, .pg-loading-screen .pg-loading-html {
   width: 100%;
   opacity: 0;
 }
-/* line 84, ../src/please-wait.scss */
+/* line 88, ../src/please-wait.scss */
 .pg-loading-screen .pg-loading-logo-header {
   text-align: center;
 }
-/* line 87, ../src/please-wait.scss */
+/* line 91, ../src/please-wait.scss */
 .pg-loading-screen .pg-loading-logo-header img {
   display: inline-block !important;
 }
-/* line 92, ../src/please-wait.scss */
+/* line 96, ../src/please-wait.scss */
 .pg-loading-screen .pg-loading-html {
   margin-top: 90px;
 }
-/* line 95, ../src/please-wait.scss */
+/* line 99, ../src/please-wait.scss */
 .pg-loading-screen .pg-loading-html.pg-removing {
   opacity: 0;
   -webkit-animation: pgAnimLoaded 0.5s cubic-bezier(0.7, 0, 0.3, 1) both;
@@ -106,7 +111,7 @@ body.pg-loaded {
   -o-animation: pgAnimLoaded 0.5s cubic-bezier(0.7, 0, 0.3, 1) both;
   animation: pgAnimLoaded 0.5s cubic-bezier(0.7, 0, 0.3, 1) both;
 }
-/* line 100, ../src/please-wait.scss */
+/* line 104, ../src/please-wait.scss */
 .pg-loading-screen .pg-loading-html.pg-loading {
   opacity: 1;
   -webkit-animation: pgAnimLoading 0.5s cubic-bezier(0.7, 0, 0.3, 1) both;

build/please-wait.js

@@ -69,6 +69,7 @@
       if (this._logoElem != null) {
         this._logoElem.src = this.options.logo;
       }
+      document.body.className += " pg-loading ";
       document.body.appendChild(this._loadingElem);
       this._loadingElem.className += " pg-loading";
       listener = (function(_this) {
@@ -123,7 +124,7 @@
       listener = (function(_this) {
         return function() {
           document.body.removeChild(_this._loadingElem);
-          document.body.className += " pg-loaded";
+          document.body.className = document.body.className.replace(" pg-loading ", " pg-loaded ");
           if (transitionEvent != null) {
             _this._loadingElem.removeEventListener(transitionEvent, listener);
           }

src/please-wait.coffee

@@ -74,6 +74,7 @@
       @_logoElem = @_loadingElem.getElementsByClassName("pg-loading-logo")[0]
       @_logoElem.src = @options.logo if @_logoElem?
       # Add the loading screen to the body
+      document.body.className += " pg-loading "
       document.body.appendChild(@_loadingElem)
       # Add the CSS class that will trigger the initial transitions of the logo/loading HTML
       @_loadingElem.className += " pg-loading"
@@ -119,7 +120,7 @@
         # Remove the loading screen from the body
         document.body.removeChild(@_loadingElem)
         # Add a class to the body to signal that the loading screen has finished and the app is ready
-        document.body.className += " pg-loaded"
+        document.body.className = document.body.className.replace(" pg-loading ", " pg-loaded ")
         if transitionEvent? then @_loadingElem.removeEventListener(transitionEvent, listener)
         # Reset the loading screen element since it's no longer attached to the DOM
         @_loadingElem = null

src/please-wait.scss

@@ -19,6 +19,10 @@ body.pg-loaded {
   @include prefixed(animation, pgAnimLoading 0.5s cubic-bezier(0.7,0,0.3,1) both);
 }
 
+body.pg-loading {
+  overflow: hidden;
+}
+
 .pg-loading-screen {
   position: fixed;
   bottom: 0;