<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.js"></script>
<script type="text/javascript">
NProgress.start();
NProgress.done();
</script>
<div class="container">
<div class="row">
<h2>YouTube-like loading top bar effect</h2>
<p>Here’s an emerging UI pattern: a web page loading bar with spinner. </p>
<ul>
<li><a href="http://www.usabilitypost.com/2013/08/19/new-ui-pattern-website-loading-bars/">New UI Pattern: Website Loading Bars</a> (usabilitypost.com)</li>
<li>Best viewed <a href="http://bootsnipp.com/iframe/r8l5r" target="_blank">full screen</a></li>
<li>
<a href="http://validator.w3.org/check?uri=http%3A%2F%2Fbootsnipp.com%2Fiframe%2Fr8l5r" class="pull-left" target="_blank">
<small>HTML</small><sup>5</sup></li>
</ul>
<h4>Just some images to SLOW DOWN this page </h4>
<img class="img-responsive" src="http://img.usabilitypost.com.s3.amazonaws.com/1308/youtube-loading.jpg" alt="">
<hr>
<img class="img-responsive" src="http://www.walldevil.com/wallpapers/a75/wallpaper-cool-mountain-pixel-skiing-desktop-4abfc-papel-pretty-background-large-wallpapers-images-beautiful.jpg" alt="" />
<hr>
<img class="img-responsive" src="http://phandroid.s3.amazonaws.com/wp-content/uploads/2014/10/mountains_hd.jpg" alt="" />
</div>
