MProgress.js – Googleのマテリアルデザイン風プログレスバー

Window

Googleが提唱する新しいデザインガイドライン「マテリアルデザイン」。フラットながら物の質感を感じさせる特徴を持ち、Androidや、GoogleのWebサイトなど様々な場面で活用されています。

今回紹介する「MProgress.js」は、そのマテリアルデザイン風のプログレスバーを実現するJavaScriptライブラリです(GitHub)。CSS3とPure JavaScriptで実装されていて、他のライブラリへの依存がなく導入しやすいのが特徴です。

サンプル

Window 1

MProgress.jsでは、Determinate、Buffer、Indeterminate、Query Indeterminate and Determinateといった4つのタイプのプログレスバーを使用することができます。動画を見ると、それぞれアニメーション効果が異なっていることがよく分かります。

また公式サイトのトップがオンラインデモになっていて、実際にボタンをクリックして、プログレスバーを操作することができます。

Demo

最初から表示されているのはGifアニメで、ボタンの下に表示されるのが本物のプログレスバーです。

使用方法

以下のようにインクルールドして、

<link rel='stylesheet' href='mprogress.min.css'/>

<script src='mprogress.min.js'></script>

Mprogressをインスタンス化するだけで使えます。

var mprogress = new Mprogress();
mprogress.start();
mprogress.end();

プログレスバーを表示するタグの指定や、プログレスバーの種類を指定することもできます。

まとめ

MProgress.js を使えばGoogleマテリアルデザイン風のプログレスバーを手軽に実装することができます。MITライセンスのライブラリです。

スポンサーリンク
PC用
PC用

シェアする

  • このエントリーをはてなブックマークに追加

フォローする