<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> <!------ Include the above in your HEAD tag ----------> <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>⁵</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> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="//www.youtube.com/embed/zpOULjyy-n8?rel=0"></iframe> </div> </div>

/* CREDIT and Reference: http://w3bits.com/youtube-progress-bar-effect/ http://ricostacruz.com/nprogress/ */ /* Make clicks pass-through */ #nprogress { pointer-events: none; } #nprogress .bar { background: #f00; position: fixed; z-index: 100; top: 0; left: 0; width: 100%; height: 5px; } /* Fancy blur effect */ #nprogress .peg { display: block; position: absolute; right: 0px; width: 100px; height: 100%; box-shadow: 0 0 10px #29d, 0 0 5px #29d; opacity: 1.0; -webkit-transform: rotate(3deg) translate(0px, -4px); -ms-transform: rotate(3deg) translate(0px, -4px); transform: rotate(3deg) translate(0px, -4px); } /* Remove these to get rid of the spinner */ #nprogress .spinner { display: block; position: fixed; z-index: 100; top: 15px; right: 15px; } #nprogress .spinner-icon { width: 18px; height: 18px; box-sizing: border-box; border: solid 2px transparent; border-top-color: #29d; border-left-color: #29d; border-radius: 50%; -webkit-animation: nprogress-spinner 400ms linear infinite; animation: nprogress-spinner 400ms linear infinite; } @-webkit-keyframes nprogress-spinner { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes nprogress-spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }