So, in FreeCodeCamp’s tutorials, I am learning how to make a loading screen for my website. But I dont know how to make the code run when my site is loading. How do I connect it to when my site is loading?
Well, how can you tell whether your site is loading?
It loads REALLY fast cause it is made from HTML and it doesnt have that much in it, but I was just wondering if you could tell me how to connect the loading scene to when the site is loading
When a page is “loading” it’s waiting for data, so websites use JavaScript to show a loading icon until the data arrives.
So, if I want to have my own loading icon, I have to integrade it into my website, so it will really be a welcome screen instead of a loading screen?
Do you know how to make it where I can make the loading page last for like 10 seconds and then go to the home page?
But you’re not loading anything.
Maybe @Colewave188 is just doing it for fun? Or wants to intentionally irritate his visitors 
One way would be to initially hide all of the content on your page except for the loading icon (or whatever you are using to represent loading) and then set a timer in JS that goes off in ten seconds and removes the icon and displays your content.
This is a very simplified description of how to do it as there are almost certainly accessibility issues that need to be addressed, especially for people who can’t see your page.
1 Like
Yes, I am just doing it for fun. Mostly to see if I can do it.
Instead of waiting for real data, you could just use a JavaScript timer.
Do you use JS in the HTML? And if so, how do you do that?
JavaScript is different from HTML. If you are following the freeCodeCamp curriculum, JavaScript starts in the second section.
Well, then how do I put it into my website? By the tag? Or is that something different?
this pen has an example of how to do it:
https://codepen.io/kravmaguy/pen/YRMbre
to adjust the length of the animation you can change the length of the css transition, wrapping the
loader.classList.add("hide-it");
inside a setTimeout will cause the transition class to be applied after a specified number of milliseconds.
1 Like
what you are looking for I believe is this:
and as bbsmooth mentioned before that type of behavior might not be recommended.
Thank you for your help!
1 Like
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.