ProgressBar.jsを使ってカスタムレスポンシブプログレスバーを作成する

プログレスバー Web上のほとんどのユーザーに広く知られています。開発者にとって、それはしばしば複雑なプロセスです。 最初からプログレスバーを作成する. しかしと ProgressBar.js あなたはする必要はありません!

この無料のオープンソースライブラリ 依存関係はありません そして すべての主要ブラウザをサポート, IE9を含む+.

デフォルトでは、 単純なバーを使う, またはできます いくつかの基本的な形から選ぶ, といった：

あなたもデザインできます あなた自身のカスタム形状 心、雲、あるいはあなたのウェブサイトのロゴの文字などさえ。これにはある程度の努力が必要ですが、最終的な結果は信じられないほどです。.

図書館 SVGパスで動作します, あなたができるならそう 輪郭を描かれた形を造る SVGマークアップを使えば アニメ化 このプログレスバーライブラリで.

アニメーションもできます テキストを含める または カスタムの開始/停止パターンがあります. 完全なAPIは オプションとコールバックの詳細 あなたがあなたの余暇で熟読することができること.

ProgressBar.jsも小さい インストールガイド どこのことができます スクリプトをダウンロードして設定する Bower、npm、またはもっと単純化されたGitHubページを使う.

そして、あなたがクールなものを作ればあなたはできる GitHubリポジトリにコードを送信してください。. プロジェクトの作成者であるKimmo Brunfeldtは、 GitHubのオープン号 どこのことができます カスタムデザインを提出する ライブラリに含まれる.

あなたはできる アニメーションプログレスバーを追加する ページのサインアップ、フィールドのアップロード、またはプレローダとしての任意のWebページへのアクセス。オプションは以下によってのみ制限されます。 どのくらい詳細 喜んで手に入れる.

例えば、私はそれ以来、パスワード強度計のデモが好きです 本当の目的を果たす そして ユーザーエクスペリエンスに役立つ. この例は来る プラグインに同梱, あなたはこれをコピーしてあなたの好みに合わせて修正することができます.

見る より多くの例, ProgressBar.jsのホームページをチェックするか、このフィドルを覗いてハートのアニメーションをデモ.