BOTJr. BOTJr. - 16 days ago 14
CSS Question

Loading gif while page loads more items

It might be a duplication but i cannot seem to find the right answer.What i was trying to achieve was to show a loading gif when i press load more.

enter image description here

This is the structure of my website.What i was thinking that if somehow i can show a loading gif when person clicks load more and then hide that gif while items gets loaded.

<body>
<navbar>
</navbar>
<div id="filter">

</div>
<div id="limitpage">

</div>
<button id="loadmore">load more</button>
<footer>
</footer>
</body>


This would be the basic code structure of the page.

What i tried:

<script>
$('#loadmore').on('click',function(){
//add loader class to limitpage

// when ajax completes

//remove loader class from limitpage
})
</script>


css:

.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('images/page-loader.gif') 50% 50% no-repeat rgb(249,249,249);
}


However,if i do this , i don't see the desired results.

What would be my approach towards this and what would be the solution?

Answer

Here is example how you can hide loader after ajax finished loading.

Where is "finished loading" in code below, replace it with your parsed response data and append it to your "DISPLAY ITEMS" content.

$('#loadmore').on('click',function(){
    $(".loader").show();
    $.get("https://upload.wikimedia.org/wikipedia/commons/9/92/Big_Sur_Coast_California.JPG", function(){
        $(".loader").hide();
      console.log("finished loading. Append data to content here");
    });

})
.loader {
    position: fixed;
    left: 200px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('images/page-loader.gif') 50% 50% no-repeat rgb(249,249,249);
    display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<navbar>
</navbar>
<div id="filter">

</div>
<div class="loader">
    <img src="https://d13yacurqjgara.cloudfront.net/users/140957/screenshots/2533654/loading-animation.gif" height="150">
</div>
<div id="limitpage">

</div>
<button id="loadmore">load more</button>
<footer>
</footer>
</body>