Formally developed by Aaron Marquez of StackManiac, PageLoader 2 has been completely rebuilt from the ground up. This stack is now compatible with many more RapidWeaver themes. At least 30 different progress loading effects are now supported. We've also added the ability for PageLoader to be setup as a partial in Stacks 3, permitting you to share the same stack over multiple webpages.

PageLoader will not slow down your webpage loading or obscure your content. It comprises of single CSS and Javascript files that go into the <head> section of your webpage. As the page begins to load from the web server, the progress indicator will display. In older web browsers or in instances where Javascript has been disabled, PageLoader will be safely ignored.

Simple animated progress indicators are used on purpose, to ensure compatibility with a maximum number of web browsers. Because animated progress indicators are one of the first things someone sees, it is vitally important they display within milliseconds of the page starting to load. For this reason, we purposefully refrain from using any animated progress indicators that involve the use of graphics or font icons.

Example

A PageLoader stack has been added to this page. Refresh this webpage (F5 or CMD + R) to see it work. A free demo version is also provided, so you can test this stack for suitability with your chosen RapidWeaver theme and experiment with the different loading effects offered. Over 30 effects are available for selection in the stack!

Setup

To get PageLoader working in your website, follow these instructions
  1. Once downloaded and installed into Stacks / RapidWeaver, open your stacks library and drag and drop a copy of PageLoader into your stacks page
  2. In the PageLoader settings, choose the desired loading effect and adjust the colour scheme
  3. Enable the 'Hide Page Until Loaded' setting if you want to hide the page until loading is finished. Provide an element sector name and customise the speed settings
  4. Publish the page when done

Please only use one PageLoader stack per-page and disable any other page loading effects which other stack elements or your RapidWeaver theme might be deploying.

Configuring elements to hide when 'hide page until loaded' is enabled

In order to hide a page until is is loaded, the web browser needs to know what element(s) on the page to hide. In ThemeFlood RapidWeaver themes, this is pretty simple because nearly all our themes have content containers wrapped-up inside a pageWrapper divisional container, used for the existing theme 'fade-in' option. However if you are using other themes, the wrapper class or ID selector might be different. Some themes don't even have a wrapper class or ID, so you might need to list multiple selector names with separating commas.

To get the class or ID selector, it is best to preview the webpage in a normal web browser, Like chrome, Firefox or Safari. When you have developer tools enabled you can 'inspect' the page to view its markup. You need to find a node (divisional container) that encloses other page elements. A theme developer might be able to help you find the correct selector name to use. ID selectors are entered in the PageLoader settings with a prefixed hash (#) character, and class selectors are entered with a prefixed fullstop (.) character. Do not use the wildcard div, html or body selectors, as you will also inadvertently hide the progress loading effect!