Adding a CSS preloader to Dynamic Page loader

Question

so I came across this snippet below which is fantastic at changing my pages within a div. However, I'm scratching my head on how I can do the following:

make it so it fades in a CSS preloader e.g.preload (https://projects.lukehaas.me/css-loaders/)
it then to show this preloader for x amount of seconds
Then for the preloader to fade out and show the content.

If anyone out there can help me point me in the right direction, a big thank you in advance.

$(function() {

    if(Modernizr.history){

    var newHash      = "",
        $mainContent = $("#main-content"),
        $pageWrap    = $("#page-wrap"),
        baseHeight   = 0,
        $el;

    $pageWrap.height($pageWrap.height());
    baseHeight = $pageWrap.height() - $mainContent.height();

    $("nav").delegate("a", "click", function() {
        _link = $(this).attr("href");
        history.pushState(null, null, _link);
        loadContent(_link);
        return false;
    });

    function loadContent(href){
        $mainContent
                .find("#guts")
                .fadeOut(2000, function() {
                    $mainContent.hide().load(href + " #guts", function() {
                        $mainContent.fadeIn(1000, function() {
                            $pageWrap.animate({
                            });
                        });
                        $("nav a").removeClass("current");
                        console.log(href);
                        $("nav a[href$="+href+"]").addClass("current");
                    });
                });
    }

    $(window).bind('popstate', function(){
       _link = location.pathname.replace(/^.*[\\\/]/, ''); 
       loadContent(_link);
    });

} 


});

Shreyan Mehta · Accepted Answer · 2020-01-13 06:02:47Z

2

You should create a div on first level of body and the rest content could be added in sibling div. Keep this sibling div class hidden , in hidden class keep display: none.

.hidden {
display: none;
}

When you want to close the loader, added hidden class to it and remove it from this sibling div. For smooth motion you could use CSS transition

If you are using Jquery, then

$(window).load(unHideContain)

this will call the unHideContain when window is loaded. Till then a css generater loader or a full size loading .gif can display loading.

Alternatively you can also use Jquery FadeIn

For doing it static timely as stated, which is not a good and recommeneded solution, you can do is

window.setTimeout(unHideContain,5000)

edited Jan 13, 2020 at 6:02

answered Jan 13, 2020 at 5:47

Shreyan Mehta

5506 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Shreyan Mehta Over a year ago

so you want static timed ? If so you can add a setTimeout and inside you could do fadin and fadeout

James Harris Over a year ago

So as i said, i see what you have put above that makes some sense i guess to me! > new trying to edit this code from someone who had made this previously. I want to give it a timer, so for example i click on "ABOUT US" it shows the preloader css spinner, it waits say 5000 and then the content comes straight in, does this each time a new page is clicked.

James Harris Over a year ago

So if i am right, window.setTimeout(unHideContain,5000) would replace $mainContent.hide().load(href + " #guts", function() { in here just trying to read what i have here, hmm thanks for the help by the way.

Collectives™ on Stack Overflow

Adding a CSS preloader to Dynamic Page loader

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related