I have css animation for preloader.

I need help to update content smoothly without redirecting page, using following functions

$(window).on("popstate", function() { });

window.history.pushState({path: ""},"","");

Update link & content of next page after preloader progressbar animation ends webkitTransitionEnd without redirecting to page.

Need help to complete following functions

function changeUrl() { }
function updateContent() { }

Html/CSS/Js code (jsfiddle links)

after adding 'loading' class to body tag (Full Window)
after removing 'loading' class from body tag (Full Window)

created function as follows, but not working correctly. need some help.

Please help
Thanks

jQuery(document).ready(function(event){ 

if(Modernizr.history){

    $('.nav li a').on('click', function(event){
        event.preventDefault();

        var url = $(this).attr('href');
        $('body').addClass('loading');      

        window.history.pushState(null, null, url);
        loadContent(url);   

    });    

    function loadContent(href){

        setTimeout(function(){
            $("main").load(href);   
            $('body').removeClass('loading');   
        }, 1200);   
    }

$(window).on('popstate', function() {
       url = location.pathname.replace(/^.*[\\\/]/, ''); //get filename only
       loadContent(url);
    });
}

})(jQuery); 

HTML

<div class="page">
  <main>
    <ul class="nav">
      <li><a href="index.php">Home</a></li>
      <li><a href="about.php">About</a></li>
      <li><a href="contact.php">Contact</a></li>
    </ul>
    <div class="main-content">
      <h1>Home</h1>
    </div>
  </main>

  <div class="loader"></div>
</div>

CSS

*, *::after, *::before {
    box-sizing: border-box;
}
html, body {
    height: 100%;
    line-height: 170%;
}
body {
    font-family: sans-serif;
    font-size: 14px;
    line-height: 1.5;
    font-style: normal;
    font-weight: 400;
    color: #fff;
    background: #000;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0;
    padding: 0;
}
body::after, body::before {
    /* these are the 2 half blocks which cover the content once the animation is triggered */
    content: '';
    height: 50vh;
    width: 100%;
    position: fixed;
    left: 0;
    background-color: #ffffff;
    z-index: 1;
    /* Force Hardware Acceleration */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition: -webkit-transform 0.4s 0.4s;
    -moz-transition: -moz-transform 0.4s 0.4s;
    transition: transform 0.4s 0.4s;
}
body::before {
    top: 0;
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
}
body::after {
    bottom: 0;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%);
}
body.loading::after, body.loading::before {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: -webkit-transform 0.4s 0s;
    -moz-transition: -moz-transform 0.4s 0s;
    transition: transform 0.4s 0s;
}
.nav {
    display: inline-block;
    margin: 0 auto;
    padding: 1em 3em;
    list-style: none;
}
.nav li {
    display: inline;
    margin: 0 1em 0 0;
}
.nav a {
    display: inline-block;
    padding: 0.7em 1.25em;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid gray;
}
h1 {
    font-size: 50px;
    line-height: 60px;
    margin-bottom: 23px;
    margin-top: 0;
    margin-bottom: 35px;
    font-weight: 400;
    word-wrap: break-word;
    text-align: center
}
.page {
    width: 100vw;
    height: 100vh;
    background: #7a60ff;
    background: linear-gradient(to left, #7a60ff, #cd9ffa);
}
.loader {
    /* this is the loding bar - visible while switching from one page to the following one */
    position: fixed;
    z-index: 2;
    left: 50%;
    top: 50%;
    height: 2px;
    width: 90%;
    background-color: #aed6ff;
    visibility: hidden;
    -webkit-transition: visibility 0s 0.4s, -webkit-transform 0.4s 0s ease-in;
    -moz-transition: visibility 0s 0.4s, -moz-transform 0.4s 0s ease-in;
    transition: visibility 0s 0.4s, transform 0.4s 0s ease-in;
    /* Force Hardware Acceleration */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.loader::before {
    /* this is the progress bar inside the loading bar */
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: #ff2e2e;
    /* Force Hardware Acceleration */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -ms-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
}
.loading .loader {
    visibility: visible;
    -webkit-transform: translateX(-50%) translateY(-50%) scaleX(0.3);
    -moz-transform: translateX(-50%) translateY(-50%) scaleX(0.3);
    -ms-transform: translateX(-50%) translateY(-50%) scaleX(0.3);
    -o-transform: translateX(-50%) translateY(-50%) scaleX(0.3);
    transform: translateX(-50%) translateY(-50%) scaleX(0.3);
    -webkit-transition: visibility 0s 0.3s, -webkit-transform 0.4s 0.4s;
    -moz-transition: visibility 0s 0.3s, -moz-transform 0.4s 0.4s;
    transition: visibility 0s 0.3s, transform 0.4s 0.4s;
}
.loading .loader::before {
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -ms-transform: scaleX(1);
    -o-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transition: -webkit-transform 0.8s 0.8s ease-in;
    -moz-transition: -moz-transform 0.8s 0.8s ease-in;
    transition: transform 0.8s 0.8s ease-in;
}

@gentlemedia

Yes I have tried, but not working. I'hve created my function based on this, - tut

Please someone try my code with index.php, about.php & contact .php, to understand exact problem

index.php

<div class="page">
      <main>
        <ul class="nav">
          <li><a href="index.php">Home</a></li>
          <li><a href="about.php">About</a></li>
          <li><a href="contact.php">Contact</a></li>
        </ul>
        <div class="main-content">
          <h1>Home</h1>
        </div>
      </main>
      <div class="loader"></div>
    </div>

about.php

    <div class="page">
      <main>
        <ul class="nav">
          <li><a href="index.php">Home</a></li>
          <li><a href="about.php">About</a></li>
          <li><a href="contact.php">Contact</a></li>
        </ul>
        <div class="main-content">
          <h1>About</h1>
        </div>
      </main>
      <div class="loader"></div>
    </div>

Contact.php

    <div class="page">
      <main>
        <ul class="nav">
          <li><a href="index.php">Home</a></li>
          <li><a href="about.php">About</a></li>
          <li><a href="contact.php">Contact</a></li>
        </ul>
        <div class="main-content">
          <h1>Contact</h1>
        </div>
      </main>
      <div class="loader"></div>
    </div>