Page loader

header.html

<!-- begin #page-loader -->
<div id="page-loader" class="fade in"><span class="spinner"></span></div>
<script>
  $(document).ready(function(){
    $.when($("#page-loader").addClass("hide")).done(function () {
      $(".page-container").addClass("in")
    })
  });
</script> 
<!-- end #page-loader -->

spinner.css

/* ============== spinner ============== */


#page-loader.fade.in {
    display: block;
}

#page-loader {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: $gray-lighter;
}

.fade.in .spinner {
    @include animation(spin .6s infinite linear);
}

.spinner {
    height: 40px;
    width: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -20px -20px 0 0;
    border: 2px solid #fff;
    border-top: 2px solid $cyan;
    border-radius: 100%;
}