How to make a preloader

Can anyone tell me how can i add a loading animation when the page is loaded.

Thank you.

It may be better for you to Google this topic and read several articles to better understand it. But the basic idea is that when an HTTP request is in flight you can show some HTML until the request resolves and you get the data back. Once you have the data you then remove the HTML element or update the CSS so that it’s hidden from view. Here is some pesuedo code as a basic illustration. It’s not really practical to show a loader the first time the entire page loads (if you are using a JS framework like React you can show a loader while the page loads, but this is because JS is controlling the page loading process). They are mainly used when only a portion of a page is updating such as when you submit a form.

const loader = `<div class="loading">Loading...</div>

const fetchUserData =  async () => {
   ....some code to fetch a user
}

const loadUser = () => {
   // 1. show the loader 
   // 2. call fetchUserData
  // 3.  remove the loader
}

// some button in your app
<button onclick="loadUser()">load user</button>

I am very very sorry for the late reply. I learnt something new.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.