Page Loading Transitions

You can show Interactive loaders to your Visitors while the Pages of you Website loads in the background & then Reveal your Pages with CSS3 Transitions. Page Transition options are applied on the <body> Tags.

Code Example

<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.

Option(s): 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14

Ex: data-loader="8"

data-animation-in

The Animation style on Page Load-In.

Option(s): fadeIn, rotateIn, etc.
You can use all the available options from here: Animation Options

data-animation-out

The Animation style on Page Load-Out.

Option(s): fadeOut, rotateOut, etc.
You can use all the available options from here: Animation Options

data-speed-in

The Speed of the Animation in milliseconds on Page Load-In.

Option(s): 1500

data-speed-out

The Speed of the Animation in milliseconds on Page Load-Out.

Option(s): 800

data-loader-color

Use any HEX Color for the Loader.

Option(s): #FF0000

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.

Option(s): 4000

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.

Last Modified: September 30, 2020