Smooth Page Transition

Enable Smooth Page Transition

Click on the More section, then you can find the options for “Smooth Page Transition”.

You can choose to enable Smooth Page Transition feature, so when you click an internal link and leave the current page, the loader will appear with animation again, to fulfil the blank between pages.

Please check this demo site to preview the feature:

By default, only the background will show immediately when clicking an internal link. If you want to show other elements (loader/message/progress bar), please enable “Show all elements when leaving the current page” option. This option is newly added since version 2.1.

Choose to display all elements in the loading screen when leaving the current page.

Internal Links: they are links that go from one page on a domain to a different page on the same domain.
Please note: this feature only works when clicking an internal < a > link. This feature cannot be triggered when clicking on a JavaScript-driven < button >.

Since each website may use JavaScript-driven buttons to achieve different goals (such as clicking the button to pop up a subscription form or banner ad, or refreshing only a part of a page via AJAX, etc.), it is very complicated to detect if a button is used to link to another internal page of a website.


Please note: to get the best result of this feature, we suggest:

  1. Use the same loader on one site: Do not enable “Any Page Extension” and use different loader shortcodes for different pages on one site.
  2. Choose to display the loader sitewide: every page/post on your site.
  3. It would be better not to use a semi-transparent loader background.


And please note: this feature WILL NOT work for the situations listed below:

  • When choose to display the pre-loader “Once Per Session”.
  • When open the link in a new tab/window.
  • When a page uses LoftLoader shortcodes (with “Any Page Extension” enabled).
  • When a page/post doesn’t have a pre-loader according to your “Display On” settings.
  • When clicking on a JavaScript-driven button (<button>).


Please note: the options in the More section only work on front end. It means when you change the settings, nothing will happen in the preview area. Save the changes you have made, they will be applied to your site. Please remember to clear your site cache and browser cache before checking your front-end.