CircularLoader.js

JavaScript

シンプルな円形プログレスバーを簡単に実装できる「CircularLoader.js」

CircularLoader.jsは円形プログレスバーを簡単に実装することができるjQueryプラグインです。シンプルなデザインですが、オプションでプログレスバーのカラーや背景色なんかをカスタマイズすることも可能です。HTML5とJavaScriptで作られています。

CircularLoader.jsの使い方

CircularLoader.js

使い方はとても簡単です。jQueryとCircularLoader.jsを読み込んだら、プログレスバーを表示させる空のdivを以下のように設置します。

<div id="divProgress"></div>

あとはcircularloaderを呼び出してあげるだけです。progressPercentという項目に数値を記述します。

<script>
$("#divProgress").circularloader({
    progressPercent: 5 
});
</script>

オプションでフォントカラー、フォントサイズ、プログレスバーのカラー、背景色、幅など色んな項目をカスタマイズすることができます。

HTML5サポート済みの対応ブラウザは、Internet Explorer 9.0+、Google Chrome 4.0+、Mozilla Firefox 2.0+、Safari 3.1+になります。

シンプルな円形プログレスバーを取り入れたい方は是非チェックしてみてはいかがでしょうか?

回転するアニメーション付きの円形ナビゲーションを実装できる「wheelnav.js」前のページ

スライドやポップアップなど豊富で快適なアニメーションを実装できる「Animate Transition」次のページAnimate Transition

関連記事

  1. RefineSlide

    JavaScript

    多数のエフェクトが素敵!レスポンシブ対応のjQueryスライダー「RefineSlide」

    多数のエフェクトがあってレスポンシブWebデザインにも対応しているスラ…

  2. JavaScript

    シンプルでカスタマイズも簡単にできるjQueryプラグイン「Twitter Follow Box W…

    とてもシンプルでカスタマイズもしやすいjQueryプラグイン「Twit…

  3. Horizontal Timeline

    JavaScript

    水平方向のタイムラインを実装できる「Horizontal Timeline」

    Horizontal Timelineは水平方向に移動可能なタイムライ…

  4. countdownCube

    JavaScript

    3Dキューブのように回転するカウントダウンタイマーを実装できる「countdownCube」

    countdownCubeは3Dキューブのようにクルッと回転するカウン…

  5. PleaseWait

    JavaScript

    ローディングアイコンをオシャレに実装することができる「PleaseWait」

    PleaseWaitはローディングアイコンをオシャレに見せることができ…

  6. jQuery Bar Rating

    JavaScript

    選択範囲を評価ウィジェットに変換できる「jQuery Bar Rating」

    jQuery Bar Ratingは、ユーザーが選択する範囲を評価ウィ…

最近の記事

  1. EOS RP
  2. COMOLI シルクネルジャケット シルクネルドローストリングパンツ
  3. スターバックス ハシエンダ アルサシア
  4. イングリッシュマフィン

アーカイブ

PAGE TOP