Loading Page Progress
The Loading Page Progress behavior controls the visual loading animation for the autoload-page-loading wrapper. It supports line-based loaders, ring-based loaders, percentage text, and percentage counter elements.
This is designed to keep the loading page hidden while working in the Designer, then force it to display on the published site when the page begins loading. After the loading sequence finishes, the wrapper fades out and is set back to display none.
How It Works
The main loading wrapper uses the class autoload-page-loading.
This is the full-page loading element that appears while the page is loading.
Inside the wrapper, the code can control the following loading elements:
animation-loading-line
animation-loading-ring-start
animation-loading-ring-end
b-loading = percentage
The code automatically checks which of these elements exist on the page. This means the same code can be used for a line loader, a ring loader, a percentage loader, or a combination of all of them.
Designer And Published Site Behavior
The autoload-page-loading element can be set to display none so it does not interfere while building the page in the Designer.
The CSS in the code keeps the loader hidden inside the Designer and forces it to display on the published site.
This allows the loading page to stay out of the way while editing, but still appear immediately when the published page loads.
Loading Line
The line loader uses the class animation-loading-line.
This element is animated from 0% width to 100% width.
If there is more than one animation-loading-line element on the page, all of them will animate together.
The outer line wrapper can use a class such as loading-line.
The wrapper usually acts as the track, while animation-loading-line acts as the inner fill element.
Loading Ring
The ring loader uses two separate elements:
animation-loading-ring-start
animation-loading-ring-end
The ring is built from two halves. The first half rotates during the first 50% of the loading progress. The second half rotates during the second 50%.
Each half rotates up to 180 degrees.
Together, they create a complete circular loading animation.
Percentage Text
The visible percentage number uses the attribute b-loading = percentage.
The code updates this element from 0 to 100 based on the current loading progress.
If multiple percentage text elements are used, all of them will update together.
Minimum Intro Duration
The code includes a minimum intro duration of 2000 milliseconds.
This means the loader will stay active for at least 2 seconds before it is allowed to finish.
During this intro duration, the loader animates from 0% to 50%.
This creates a more intentional loading experience and prevents the loader from flashing too quickly on pages that load almost instantly.
Intro Progress
The intro progress is set to 50%.
This means the first phase of the loader ends at 50%.
The loader does not immediately complete to 100% during the intro. It waits until the minimum intro duration has passed and the page has loaded.
Easing
The intro animation uses a soft Power 1 In/Out-style transition.
This means the animation starts smoothly, speeds up through the middle, and slows down as it reaches 50%.
This creates a smoother and more polished motion than a linear loading animation.
Waiting For The Page To Load
After the intro duration is complete, the code checks whether the page has fully loaded.
If the page has loaded, the loader continues to 100%.
If the page is still loading, the loader continues slowly toward 92%.
This means the loader can continue moving up to 92%, but it will not complete to 100% until the page has loaded.
This prevents the loader from showing 100% while the page is still loading.
Fallback Duration
The code includes a fallback duration of 6000 milliseconds.
If the browser load event takes too long or is delayed by an external asset, the loader is forced to finish after 6 seconds.
This prevents the loader from getting stuck on the screen.
Finish And Fade Out
Once the page is loaded and the progress reaches 100%, the loader briefly holds its completed state.
The completed state is held for 150 milliseconds.
After that, the loader fades out over 500 milliseconds.
The fade is applied through opacity, moving from visible to transparent.
Once the fade is complete, the loader is set back to display none.
This removes the loader from the page flow and prevents it from blocking clicks, scroll, or interactions.
Multiple Elements
The code supports multiple elements with the same loading classes or attributes.
For example, you can use multiple animation-loading-line elements or multiple b-loading = percentage elements, and they will all stay synchronized.
This is useful when a loader design has repeated visual elements or when the same progress needs to appear in different places.
Load Once
The Page Loading Show Once code controls whether the autoload-page-loading wrapper should appear only the first time a visitor loads a specific page.
This code uses the browser’s localStorage to remember whether the visitor has already seen the loader on the current page path.
How It Works
The code looks for all elements with the class autoload-page-loading.
If no loader elements are found, the code stops.
It then creates a unique page key using the current page path.
The saved key is based on b_page_loaded_ plus the current page path.
For example, the homepage and an about page would each have their own saved loading state.
If the visitor has already loaded the current page before, the loader is hidden using display none.
If the visitor has not loaded the current page before, the loader is shown using display block.
After the first visit, the page is saved in localStorage as loaded.
This means the loader will only appear once per page for that visitor.
Recommended Setup
Set autoload-page-loading to display none in the Designer.
Add the loading progress elements inside the autoload-page-loading wrapper.
Use animation-loading-line for line progress.
Use animation-loading-ring-start and animation-loading-ring-end for ring progress.
Use b-loading = percentage for visible percentage text.
Keep the loader hidden in the Designer and let the custom code control its display on the published site.
When To Use This Custom Behavior
Use this system when a page needs a polished branded loading sequence, a first impression animation, or a visual transition before the page content becomes available.
The full progress version is best for pages where the loader should feel active and responsive.
The show-once version is best for intro-style loaders that should not repeat every time the visitor returns to the same page.
