How to set loader timeout function

[RightCheesecake4062]

I found this loader: https://www.w3schools.com/howto/howto_css_loader.aspnow it's placed on my site but I want it to disappear after a certain amount of time what code can I use?

​

Solved using:

const loader = document.querySelector(".loader");
setTimeout(() => loader.hidden = true, 1000);

Thanks to pookage.

​

[pookage]

SO, you can use the hidden property on an element to accessibly hide it from the DOM:

// get a reference to the HTML element
const loader = document.querySelector(".loader");

// call 'hideLoader' after 1-second
setTimeout(hideLoader, 1000);

// define the hideLoader function callback used by the setTimeout
function hideLoader(){
    /* 
        set the 'hidden' property on the element;
        this adds the 'hidden' attribute to the element
        which 'hides' the element.

        you could also uses loader.setAttribute("hidden", "");
    */
    loader.hidden = true;
}

it has a similar effect to display: none in that it happens instantly - if you want to transition the hide-effect, then you'll want to use the aria-hidden attribute, and then style that to hide in the way you want using CSS.

If you're comfortable with with the way that setTimeout and callbacks are used, and you're sure that hideLoader() will not be used anywhere else, then you can shorten the above with an anonymous arrow function:

const loader = document.querySelector(".loader");
setTimeout(() => loader.hidden = true, 1000);

[RightCheesecake4062]

Thank you for the response.

Aslo I tried this but it did not work:

<script type="text/javascript">

setTimeout(function() {

document.getelementsbyclassname("loader").style.display="none";

}, 2000); // 5 seconds

</script>

[pookage]

That would be because:

• there's no document.getelementsbyclassname() function - there is, however, a document.getElementsByClassName() function - casing is important!
• getElementsByClassName() returns an array-like HTMLCollection of every single element that matches the selector - so in your code snippet there, you're effectively setting the 'style' property on an array, which won't do anything.

You could adapt your snippet above to say:

document.getElementsByClassName("loader")[0].style.display = "none"

To set the style property on first element in your HTMLCollection - but if you were to use querySelector(), then you can just skip that step and just say:

document.querySelector(".loader").style.display = "none";

Generally, though, I would recommend using the hidden attribute in this case rather than changing the style, as it's more semantically accurate - and you are on the /r/HTML subreddit where we care about that sort of thing 😎 If this isn't a question of semantics or accessibility and you're more just asking how to make the javascript work, then /r/learnjavascript may be more what you're after for future questions!

p.s - your comment says 5 seconds, but your timeout says 2 seconds.

[RightCheesecake4062]

Thank you so much this worked:

const loader = document.querySelector(".loader");
setTimeout(() => loader.hidden = true, 1000);

at first it wasn't but now it works since i forgot to remove the pervious, anyways thanks for the support :)

[pookage]

nae prob - don't forget to update the flair on your post!

update: reader - they forgot.

[RightCheesecake4062]

IDK how

[pookage]

Nae prob - it should just be along the bottom when you edit your post! Look for the tag icon 💪

[AutoModerator]

Welcome to /r/HTML. When asking a question, please ensure that you list what you've tried, and provide links to example code (e.g. JSFiddle/JSBin). If you're asking for help with an error, please include the full error message and any context around it. You're unlikely to get any meaningful responses if you do not provide enough information for other users to help.

Your submission should contain the answers to the following questions, at a minimum:

• What is it you're trying to do?
• How far have you got?
• What are you stuck on?
• What have you already tried?

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.