JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body>
   <div class="container">
      <nav class="navbar navbar-default">
         <div class="container-fluid">
            <div class="navbar-header">
               <div class="navbar-brand">Demo Website</div>
            </div>
            <div class="navbar-collapse collapse">
               <ul class="nav navbar-nav">
                  <li class="active"><a href="https://dawgy.pw/demo/page1/">Kittens!</a></li>
                  <li><a href="https://dawgy.pw/demo/page2/">Moar Kittens?</a></li>
               </ul>
            </div>
         </div>
      </nav>
      <content>
         <br>
         <center>
            <div class="lds-css ng-scope">
               <div style="width:100%;height:100%" class="lds-rolling">
                  <div>
                  </div>
               </div>
            </div>
         </center>
      </content>
   </div>
</body>

CSS

@import url('https://fonts.googleapis.com/css?family=Roboto');
body {
    padding-top: 50px;
    font-family: 'Roboto', sans-serif;
}
@keyframes lds-rolling {
    0% {
        -webkit-transform: translate(-50%, -50%) rotate(0deg);
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
@-webkit-keyframes lds-rolling {
    0% {
        -webkit-transform: translate(-50%, -50%) rotate(0deg);
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
.lds-rolling {
    position: relative;
}
.lds-rolling div,
.lds-rolling div:after {
    position: absolute;
    width: 160px;
    height: 160px;
    border: 20px solid #5d6486;
    border-top-color: transparent;
    border-radius: 50%;
}
.lds-rolling div {
    -webkit-animation: lds-rolling 0.9s linear infinite;
    animation: lds-rolling 0.9s linear infinite;
    top: 100px;
    left: 100px;
}
.lds-rolling div:after {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
.lds-rolling {
    width: 74px !important;
    height: 74px !important;
    -webkit-transform: translate(-37px, -37px) scale(0.37) translate(37px, 37px);
    transform: translate(-37px, -37px) scale(0.37) translate(37px, 37px);
}

JavaScript

$(function() {
    function loadpage(page) {
        $.ajax({
            url: page,
            success: function(data) {
                $('content').html(data);
            }
        });
    }

    // initial load content
    loadpage("https://dawgy.pw/demo/page1/");


    $("a").click(function() {
        $(".active").removeClass("active");
        $(this).parent().addClass("active");
        $('content').html('<br><center><div class="lds-css ng-scope"><div style="width:100%;height:100%" class="lds-rolling"><div></div></div></center>');
        event.preventDefault();
        loadpage(($(this).attr('href')));
    });
});