Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
Light
Dark
System
Ask  Question

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.


user
Haravikk 1 year ago
Bootstrap 5 HTML
2 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (2)

user
Ronald 1 year ago

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.


user
Sean Author 1 year ago

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


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(