Load content without redirecting page using window.history.pushState

[tun712]

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)

[tun712]

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]

Did you checkout this pushState and AJAX tutorial"
https://css-tricks.com/using-the-html5-history-api/

[tun712]

@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>