YouTube風のページローダーを実装する「NProgress.js」

「NProgress.js」はYouTube風な画面上部にページ読み込みのプログレスバーとローダーを実装できるjQueryプラグインです。

NProgress.js

NProgress

YouTube風というか全くそのまま。左から右へ進むプログレスバーと、画面右上に円形のローダーを表示させることができます。

まずはノーマル画面。

NProgress-demo-1

読み込みを始めると、やじるしで指した箇所にプログレスバーとローダーが表示されます。

NProgress-demo-2

 

 

それでは「NProgress.js」の実装方法をご紹介します。まずはjQuery含む外部ファイルを読み込みます。

<link href='nprogress.css' rel='stylesheet'>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src='nprogress.js'></script>

 

HTMLはこのようにマークアップします。特に必要はないのですが、h1タグでタイトルをつけておきました。

<h1>NProgress.js Demo</h1>

 

JavaScriptはこのように実装します。setTimeoutでプログレスバーを終了させる機能(NProgress.done())を実行させています。onloadで実行させるのが現実的な使い方かな?

NProgress.start();
setTimeout(function() { NProgress.done(); $('.fade').removeClass('out'); }, 1000);

 

するとこのように作ることが出来ました。

NProgress-sample-1

簡単に作ることができました。プログレスバーのようなUIはページ読み込み待ちのイライラを減らす効果があるかと思います。ぜひ参考にどうぞ。

 

Home > JavaScript > YouTube風のページローダーを実装する「NProgress.js」

Return to page top