Show Page Loading Spinner Until Javascript Has Loaded?
Is it possible to setup a keen theme to immediately show a page-loader (modal spinner), so that I can hide it later once my Javascript has finished initialising?
Using KTApp.showPageLoading() isn't suitable because it isn't guaranteed to run immediately.
Are there any classes or attributes I can add to the page-loader (or body tag or whatever) to cause it to be immediately open (and stay open) such that I can then hide it later using KTApp.hidePageLoading() once the page is ready for use?
Basically I'm looking to prevent slower loading pages from being interactive before they're ready, with some kind of loading indicator.
Replies (2)
When I was optimizing my website, Florida Swim Center, I wanted to make sure visitors wouldn’t interact with the page before all JavaScript was fully initialized. To handle this, I added a simple loading spinner that displays immediately on page load and hides once the site is ready.
Here’s a quick overview of what I did:
Added a Preloader:
I included a div in my HTML in my website for the loader and styled it to cover the entire viewport with a centered spinner.
Styled the Spinner:
I used basic CSS to create a circular spinner animation.
Hid the Spinner After JavaScript Initialization:
Using a small JavaScript snippet, I ensured the spinner disappears once everything has finished loading by targeting the loader’s display property.
Hi,
Please check the initial page loading option:
https://preview.keenthemes.com/html/keen/docs/base/page-loading#initial
This should be what you looking for.
Regards,
Sean
