#loading bar

1 messages · Page 1 of 1 (latest)

gusty ember
#

I wanna make a loading bar and customize it, is there any effective way to implement it?

hot whaleBOT
#

Hi @gusty ember. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Based on the information provided in the extracts, you can implement a loading bar in Astro by creating a separate loading.astro file with your HTML, CSS, and JS. You can then use view transitions to fade into the loading screen when a page is loading, and fade into the actual page once it's loaded.

Here's a basic outline of how you could structure your site:

index.astro
loading.astro
portfolio/
    portfolioPiece1.astro
    portfolioPiece2.astro
    etc...

You can put your HTML into the loading.astro file and your styling into a separate CSS file, linking to it using the <link> tag method. You can put your JS into the same loading.astro file as the HTML, inside the --- --- on the top.

To implement the loading screen, you could use a separate loading.astro file with the CSS animation until the page you're trying to go to loads, then go to the page. This is a preferred method as it avoids having to put the code from the loading screen into every single .astro page on your site.

For more advanced loading behaviors, you could consider using Astro's lifecycle events to create your own loading state. For example, you could use the astro:page-load event to re-initialize any animations or functionality you need on your loading screen.

Here's an example of how you could use this event in a clientScripts.js file:

document.addEventListener("astro:page-load", () => {
  // Re-initialize your loading bar or any other functionality you need
});

Remember to include this script in your loading.astro file.