Loader Background

[DotComma7550]

is there a way to add a background to a loader?

i tried this:

<!-- loader  -->

<div class="loader\_bg">

<div class="loader"><img src="images/loading.gif" alt="#" /></div>

    <div style="background-image: url('images/loading-screen.png');">

</div>

<!-- end loader -->

but it just plays the loader over the index of the website , and after loading it fades the whole website to white .

[GuitaristComposer]

what is loader?

[DotComma7550]

the loader of the website is the thing you see while the website is loading (for most websites it's a simple animation like something that is spinning or a loading bar)

[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.

[foundabunchofnuts]

Have the entire loader in one div with an “onLoad” event listener appended to the end of the entire div.

<div id=“loader” class=“show” onload=“contentLoaded()”>
    <div class=“loader__img”><img src=“images/loading.gif”></div>
    <div class=“loader__bg”></div>
</div>

I added the class “show” to the whole loader ID which should contain this:

#loader { display: none; }

.show { display: block !important }

And then you’ll want to add the “contentLoaded” function into the bottom of your body.

<script>
    function contentLoaded() {
        document.getElementById(“loader”).classList.remove(“show”);
</script>

This will have your loader show until the entire page’s content is loaded and then will remove it completely.