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+になります。

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

関連記事

  1. Slinky

    JavaScript

    モバイルライクなナビゲーションメニューを実装できる「Slinky」

    Slinkyは軽量でレスポンシブに対応したモバイルライクなナビゲーショ…

  2. no-image

    JavaScript

    フラットでシンプルなカラーピッカー実装「Pickr」

    Pickrはフラットでシンプルなカラーピッカーを実装できるのが特徴です…

  3. JavaScript

    シンプルでスワイプにも対応したスライダーならSimple jQuery sliderがオススメ

    シンプルでスマホのスワイプにも対応したスライダーを実装したいって時にオ…

  4. Bootstrap Carousel Touch Slider with Text Animation
  5. Responsive 3d Fold Scroll
  6. basicContext

    JavaScript

    使いやすいコンテキストメニューを実装できる「basicContext」

    basicContextはシンプルで使いやすいコンテキストメニューを実…

最近の記事

  1. マリアージュ フレール 紅茶チョコレート
  2. CD-ADE1BK
  3. 渋谷スクランブルスクエアからの夜景
  4. BELTZのバスクチーズケーキ

アーカイブ

PAGE TOP