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


Private Content

You must be logged in with your Envato Account for Free in order to view this Content.

Login with Envato

Custom Loader for Page Transitions

You can use a Custom Loader for the Page Transitions using the data-loader-html Attribute set to the tag.

<body class="page-transition" data-loader-html="<img src='images/loader.gif' alt='Loading...'>">

Last Modified: March 20, 2023