0
<div id="loading">
 <div class="spinner">
 <div class="bounce1"></div>
 <div class="bounce2"></div>
 <div class="bounce3"></div>
 </div>
</div>
<nav class="navbar navbar-default">
 <div class="container">
 <!-- Brand and toggle get grouped for better mobile display -->
 <div class="navbar-header">
 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1">
 <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>
 <a class="navbar-brand" href="#">Brand</a>
 </div>
 
 <!-- Collect the nav links, forms, and other content for toggling -->
 <div class="collapse navbar-collapse" id="navbar-collapse-1">
 <ul class="nav navbar-nav navbar-right">
 <li class="a-btn-one"><a href="#" data-toggle="Carousel">Carousel</a> </li>
 <li class="a-btn-two"><a href="#">Section1</a></li>
 <li class="a-btn-three"><a href="#">Quicktabs</a></li>
 <li class="a-btn-four"><a href="#">Mildred</a></li>
 <li class="a-btn-five"><a href="#">Imgaes</a></li>
 <li class="a-btn-six"><a href="#">Section5</a></li>
 <li class="a-btn-seven"><a href="#">Section6</a></li>
 <li class="a-btn-eight"><a href="#">txtrotation</a></li>
 
 
 <li class="break-br"> 
 <a class="btn btn-default btn-outline btn-circle" data-toggle="collapse" href="#nav-collapse1" aria-expanded="false" aria-controls="nav-collapse1">Categories</a> 
 </li>
 </ul>
 <ul class="collapse nav navbar-nav nav-collapse" id="nav-collapse1">
 <li><a href="page2.html">Page2</a></li>
 <li><a href="#">Development</a></li>
 <li><a href="#">Graphic design</a></li>
 <li><a href="#">Print</a></li>
 <li><a href="#">Motion</a></li>
 <li><a href="page2.html">Page2</a></li>
 </ul>
 </div><!-- /.navbar-collapse -->
 </div><!-- /.container -->
 </nav>
<div class="clearfix"></div>

<style>
#loading
{
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 position: fixed;
 display: block;
 
 background-color: #fff;
 z-index: 99999;
 text-align: center;
}
.spinner {
 margin: 0;
 width: 70px;
 height: 18px;
 margin: -35px 0 0 -9px;
 position: absolute;
 top: 50%;
 left: 50%;
 text-align: center
}

.spinner > div {
 width: 18px;
 height: 18px;
 background-color: #333;
 border-radius: 100%;
 display: inline-block;
 -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
 animation: bouncedelay 1.4s infinite ease-in-out;
 -webkit-animation-fill-mode: both;
 animation-fill-mode: both
}

.spinner .bounce1 {
 -webkit-animation-delay: -.32s;
 animation-delay: -.32s
}

.spinner .bounce2 {
 -webkit-animation-delay: -.16s;
 animation-delay: -.16s
}

@-webkit-keyframes bouncedelay {
 0%,
 80%,
 100% {
 -webkit-transform: scale(0.0)
 }
 40% {
 -webkit-transform: scale(1.0)
 }
}

@keyframes  bouncedelay {
 0%,
 80%,
 100% {
 transform: scale(0.0);
 -webkit-transform: scale(0.0)
 }
 40% {
 transform: scale(1.0);
 -webkit-transform: scale(1.0)
 }
}
</style>
<script>
$("#loading").fadeOut(2200, function(){
 }); 
</script>