Mprogress.jsを使って簡単に材料設計進捗バーを作成する

Googleのことを否定することはありません 材料設計 ウェブを根本的に変えました。それは提供しています 共通デザイン言語 UIデザイナーがすべてのWebサイトとモバイルアプリに適用できること.

この材料設計の傾向は、人気のあるマテリアライズフレームワークを含む多くのライブラリにつながっています。そしての一つ 最もクールな新素材プロジェクト 私が見つけた Mprogress.js.

このJavaScriptライブラリは 材料風プログレスバー 純粋なCSSとJavaScriptを使う. 依存関係なし, 無意味ではありません。どんなウェブサイトやウェブアプリケーションにもマッチするようなマテリアルデザインの見た目のシンプルなロード（そしてプリロード）.

設定はとても簡単です。 2つのファイルだけが必要：MprogressのCSSとJSスクリプト.

あなたはできる 両方をダウンロード GitHubリポジトリから パッケージマネージャを使う npmやBowerなど。そこから、あなたがする必要があります 新しいMprogressオブジェクトを作成する ローダーを起動するように指示します.

これは文字通り行うことができます 1行のコード：

 var mprogress = new Mprogress（ 'start'）; 

その他の物件 アニメーションのタイミング、スピード、プログレスバーの表示色を変更するために適用できます。この設定でも カスタムテンプレートを作成する デフォルトの材料設計スタイルに基づきます。驚くばかり!

でのぞき見をする デモページ このローダーの動作を確認します。それは魅惑的なローディングバーではありませんが、ゼロから構築する必要なしに素晴らしい解決策を提供します。.

次のようなメソッドを実行することができます セット（） に 割合を設定 または inc（） に ローディングバーを増やす. HTTPローダーを作成するためにプログラム的に扱うことができますが、それはJavaScriptで追加の作業を必要とします。.

Mprogress.jsの美しさは その単純さ. データを構造化する方法やロードする必要があるものはわかりません。ページを読み込んでいるか、ファイルのアップロードを処理している可能性があります。あるいは、ユーザーがページの上部からどれだけ下にスクロールしたかを追跡することもできます。.

このライブラリと一緒にできることはたくさんあります 依存関係がない あなたはどんなWebプロジェクトにもそれを使うことができます。はじめに、 MProgressレポ GitHub上でも閲覧できます。 ドキュメンテーション.