NProgress：YouTubeおよびMediumの進行状況バー

多くの人が、YouTubeとMediumに小さな新しいUI要素が表示されていることに気付きました。これは、ブラウザパネルのすぐ下にあるページ上部の細いカラーバーの形のプログレスバーです。

最近の米国の新しいUIパターン： UsabilityPostの Webサイトローディングバーは、新しい要素に注目を集めています。 判明したように、プログレスバーを使用する理由は、新しいページをロードする代わりに、JavaScriptを介してコンテンツがロードされるため、ブラウザーのページロードのインジケーターが機能しない可能性があるためです。 ユーザーがページが「フリーズ」しているという感覚を持たないように、この機能は小さなUI受信の肩に移されました。

NProgress.js [ Demo ] [ GitHub ]プラグインのおかげで、誰もが自分のサイトでまったく同じプログレスバーをすばやく作成できるようになりました。

プラグインを機能させるには、jQuery、nprogress.js、nprogress.cssを接続する必要があります。 それを使用することはそれほど難しくありません-start start()とdone()呼び出すだけです-最初に頭に浮かぶのは、それらをAjax呼び出しにバインドすることです-ajaxStartおよびajaxCompleteイベント：

 NProgress.start(); //  "" NProgress.done(); //        

高度な機能もあります。

 NProgress.set(0.3); //    NProgress.inc(); //      NProgress.configure({ ease: 'ease', speed: 500 }); //     CSS easing NProgress.configure({ trickleRate: 0.02, trickleSpeed: 800 }); 

PSそして、AngularJSを好む人向けのバージョンもあります。