CODEWITHSUNDEEP
htmlcss
Ava
Ava

Reputation: 1

Inserting a loading page into HTML/CSS?

I'm learning how to code and I wanted to link a loading page to my HTML but it doesn't seem to be working. I got my code from here but it seems like it's not working at all. If you guys could identify the problem, that'd be great.

This is the code as of now: 

<html>
<head>
<meta charset="UTF-8">
<title>Loading</title>
<link href="demo.css" rel="stylesheet" type="text/css">
<link href="normalize.css" rel="stylesheet" type="text/css">
</head>

<body>

</body>
</html>

Upvotes: 0

Views: 878

Answers (2)

Ivin Raj
Ivin Raj

Reputation: 3429

you can try this one:

function onReady(callback) {
    var intervalID = window.setInterval(checkReady, 1000);

    function checkReady() {
        if (document.getElementsByTagName('body')[0] !== undefined) {
            window.clearInterval(intervalID);
            callback.call(this);
        }
    }
}

function show(id, value) {
    document.getElementById(id).style.display = value ? 'block' : 'none';
}

onReady(function () {
    show('page', true);
    show('loading', false);
});

DEMO HERE

Upvotes: 0

Ramkee
Ramkee

Reputation: 928

I did not find your code.

So Here is a sample approach.

While the page is loading, image will be displayed at the middle of the page and the entire page is in transparent background. So Whenever your page gets loaded, then add hidden class to that image div.

Create 2 Classes one is to make div hidden. 

.hidden{
display:none;
}

Second one to show image. 

.show_image{
position:fixed;top:0;right:0;bottom:0;left:0;
background: rgba(0,0,0,0.5) url(/img/spinner.gif) no-repeat 50% 50%;
z-index:100;
background-size: 5ex;
}

And your HTML code would be

<div class="show_image"></div>
<div class="hidden box"> Your actual content </div>

Initially your content will be hidden state and loading image will be displayed.

After completion of page loading just toggle the hidden class. 

$('.box').removeClass("hidden");
$('.show_image').addClass("hidden");

You can use load function to know that page is fully rendered.

 $(window).load(function() {
    //everything is loaded
});

So that your content will become visible and loading image will be hidden.

Let me know if you need to any help regarding Page Load.

Upvotes: 1

Related Questions