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: http://demo.loftocean.com/loftloader-transition/
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.
Please note: to get the best result of this feature, we suggest:
- Use the same loader on one site: Do not enable “Any Page Extension” and use different loader shortcodes for different pages on one site.
- Choose to display the loader sitewide: every page/post on your site.
- 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.
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.
Additional Display Options
When enabling “Smooth Page Transition” feature, this option will show:
Additional Display Option
- Only show loader during page transition
- Show the loader on the current page only when leaving the page
Please check the table below to learn the differences between the 3 options:
|Default||Only Show loader during page transition||Show the loader on the current page only when leaving the page|
|Load/Refresh the page||Loader shows||No Loader||No Loader|
|Click on an internal link||Loader shows||Loader shows||Loader shows|
|About to leave the current page||Loading progress reaches 60%||Loading progress reaches 60%||Loading progress reaches 100%|
|New page is open and loading||Loader Shows. The loading progress continues counting from 61%||Loader Shows. The loading progress continues counting from 61%||Loader disappears (without ending animation)|
|New page is loaded||Loading progress reaches 100%. Loader disappears (with ending animation).||Loading progress reaches 100%. Loader disappears (with ending animation).||No Loader|
The screencasts of the loading process
For “Default” and “Only show loader during page transition“, when clicking on an internal link, the loader will show. You can see that the loader is keeping displayed when you leave the old page and when the new page is opened and loading. And you will see the ending animation of the loader.
For “Show the loader on the current page only when leaving the page“, you can see that the loader has disappeared the moment a new page is opened. And you will not see the ending animation of the loader.