YouTubeなどのプログレスバーを再現するNProgress

memo

YouTubeなどのプログレスバーを再現するNProgressを試してみた

NProgress: slim progress bars in JavaScript


YouTubeで動画を読み込むときにページの最上部に表示される、赤いプログレスバーを再現するライブラリである。

↑わかりにくいけど画面上部に赤い線がある。これがプログレスバーで、左から右へ伸びていく。


READMEを参考にして単純なサンプルで動かしてみた。

<!DOCTYPE html>
<html>
<head>
    <title>NProgress Sample</title>
    <link rel="stylesheet" type="text/css" href="css/nprogress.css"/>
</head>
<body>
<h1>Hello, NProgress</h1>
<script src="//code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="js/nprogress.js"></script>
<script type="text/javascript">
    (function () {
        NProgress.configure({
            speed: 1000
        });
        $(document).ready(function () {
            NProgress.start();
        });
        $(window).load(function(){
            NProgress.done();
        });
    })();
</script>
</body>
</html>

NProgress.configureでいろいろカスタマイズできる。
speed: 1000を設定してるのはデフォルトの0.5秒だと速すぎてキャプチャがとれなかったから。