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. no-image

    JavaScript

    シンプルでカスタマイズも簡単なパララックスエフェクト実装「parlx.js」

    parlx.jsはシンプルでカスタマイズも簡単なパララックスエフェクト…

  2. Bootstrap Mobile FullScreen Modal
  3. JavaScript

    マルチレベルで操作性に優れたレスポンシブ対応のjQueryナビゲーション

    レスポンシブに対応したマルチレベルの便利なjQueryナビゲーションが…

  4. jQuery Quick Modal
  5. imagelightbox

    JavaScript

    レスポンシブ対応でタッチフレンドリーな画像ギャラリー「imagelightbox」

    imagelightboxは、レスポンシブに対応したタッチフレンドリー…

  6. no-image

    JavaScript

    多彩なエフェクトを備えたjQueryスライダープラグイン「camera-slider」

    camera-sliderは多彩なエフェクトを備えた美しいスライドショ…

最近の記事

  1. ナイトロコーヒー
  2. チーズベーコンエッグバーガー
  3. ランチセットA
PAGE TOP