Page Loading Transitions

Page Transition & Loaders

Canvas can show an animated loader while the page loads, then fade the content in with an animation. The feature is driven by the PageTransition module and is enabled with a single class on the <body> tag.

Enabling it

Add the page-transition class to <body>. That is all that is required for the default three-dot bounce loader:

<body class="stretched page-transition">

To turn the feature off completely on a page, use no-transition:

<body class="stretched no-transition">

Choosing a built-in loader

Canvas ships 14 CSS spinner styles. Set data-loader to a number from 2 to 14 (the default, 1, is the three-dot bounce and needs no attribute):

<body class="stretched page-transition" data-loader="11">

A few of the styles you can pick from:

2 flipper
4 five-bar wave
7 grid pulse
9 ball rotate
11 triangle path
14 scale ripple

Coloring the loader

Use data-loader-color. Pass theme to use your theme color, or any valid CSS color value:

<body class="stretched page-transition" data-loader-color="theme">

<body class="stretched dark side-header page-transition" data-loader-color="#543456">

The color is applied through the --cnvs-loader-color CSS variable that the module injects onto the spinner wrapper.

Custom loader markup

For a fully custom loader (for example your own logo), use data-loader-html. The string you pass is placed inside the spinner wrapper:

<body class="stretched page-transition" data-loader-html="<img class='infinite animated pulse' src='images/logo.png' width='300'>">

Controlling the animation

The content reveal animation and its speed are configurable:

data-animation-in sets the reveal animation. Default is fadeIn. You can pass any Canvas animation name, for example fadeInUp or zoomIn.
data-speed-in sets the duration in milliseconds. Default is 1000.
data-loader-timeout forces the loader to end after a fixed number of milliseconds, even if load has not fired.

<body class="stretched page-transition" data-animation-in="fadeInUp" data-speed-in="800">

Tips

The loader always ends on the window load event, and there is a built-in failsafe timer so the page is never stuck behind the loader.
The wrapper element (.page-transition-wrap) is created and removed automatically, so you do not need to add any loader markup yourself unless you use data-loader-html.
Keep data-speed-in reasonable (600 to 1200 ms works well). Very long values delay content from appearing.

Usage

<body class="page-transition" data-loader="2" data-animation-in="fadeIn" data-speed-in="1500" data-animation-out="fadeOut" data-speed-out="800">

Settings

Setting	Description
`data-loader`	Loader Style of the Page Transition. Example: `8`
`data-animation-in`	The Animation style on Page Load-In.
`data-speed-in`	The Speed of the Animation in milliseconds on Page Load-In.
`data-loader-color`	Use any HEX Color for the Loader.
`data-loader-timeout`	Add a TimeOut in milliseconds to end the Page Loading Transition prematurely in certain circumstances when the Page Loading Transition continues to be displayed for Longer Periods of time.
`data-loader-html`	Add Custom HTML Codes if you want to display a Customized Loader. Make sure that you escape Double/Single Quotes properly to avoid unexpected errors which will cause the Page to not display correctly.

Extras

Enable page transitions by adding the page-transition class to <body>, then pick a loader spinner and colour with data attributes.

<body class="stretched page-transition"
      data-loader="2"
      data-loader-color="theme"
      data-animation-in="fadeIn"
      data-speed-in="1000">

Attributes read by the PageTransition module:

data-loader: spinner style, 1 to 14 (default is the three-bounce spinner).
data-loader-color: any CSS colour, or theme to use --cnvs-themecolor.
data-loader-html: custom HTML to replace the built-in spinner.
data-animation-in: entry animation class (default fadeIn).
data-speed-in: entry duration in ms (default 1000).
data-loader-timeout: force-hide the loader after N ms.

Add no-transition to <body> to disable transitions on a specific page.

Was this page helpful?