LoadingOverlay Stack

LoadingOverlay Stack

shows an overlay and a loader until the page is fully loaded

Sometimes it's a good idea to prevent a visitor from starting to click on links before the page is fully loaded. Especially with heavy gallery pages that require quite some time to load, clicking on a thumbnail before the page is fully loaded can have an undesired effect like opening the big image in a new page instead of in a lightbox.

The LoadingOverlay Stack shows an overlay and a loader (text and/or an image) until the page is fully loaded – preventing any interaction with any elements on the page. As soon as the page is fully loaded, the overlay and loader disappear. This means you can also use this stack to cover-up any flash of unstyled content (FOUC).

To make sure you see the overlay and the loader, these demo pages contain very large images. If you are not using a flat fee Internet connection, you may want to wait until you have access to such a connection.
Demo #1: an animated gif as loader
Demo #2: an animated gif and a short text as loader
Demo #3: CSS3 animated loading text

  • Drag a text stack into the drop zone of the LoadingOverlay Stack and type some text and/or drag the image into that text stack (fig.1 [1]). Please note: always use a text stack, even when you only want to use an image!
  • Set a fixed width to the text stack (Layout > Fill Mode > Fixed Size) (fig.1 [2]).
  • When using text, set the Pixel Width of the text stack (preferably to a maximum of 320px, so the loader will fully show on mobile phones in portrait mode) (fig.1 [3]).
  • When using an image only, set the Pixel Width to the same value as the width of the image.
  • Use Align to horizontally align the loader (fig.1 [4]).
  • Use the loader position options of the LoadingOverlay stack to vertically align the loader (fig.2 [5]).
  • Use the Detailed Margin of the text stack to create distance between the loader and the edge of the browser window (fig.1 [6]).
Do not alter the standard styling options (Background, Border, Layout) of the LoadingOverlay stack, but use the text stack you dragged into the drop zone of this stack to set the background, border, margin, padding, etc. of the loader.

As long as you are working on the page with the LoadingOverlay Stack, you can temporarily disable the overlay and loader or set it to not disappear when the page is loaded.
Do not forget to disable this option before publishing!

Need help using it on a non-stacks page? Here’s a tutorial.

  • When the visitor has JavaScript disabled in his browser, the stack will not work and the overlay and loader will not show.
  • Sometimes the overlay and loader will disappear before the page is fully loaded in RapidWeaver Preview Mode. This will not happen on your exported or published page.

Please use this form to report all issues, questions and comments.

This stack requires the Stacks plugin by YourHead (version 2 or higher).
Do you like this stack? Please consider leaving a review in the RapidWeaver Community’s Addons section [link].
LoadingOverlay Stack HUD
fig. 1
LoadingOverlay HUD
fig. 2
© 2012-2018 Marathia Web Design | Contact