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. intence

    JavaScript

    インタラクティブなナビゲーションスクロールバーのJSライブラリ「intence」

    intenceはスクロール中のエリアが分かるインタラクティブなナビゲー…

  2. JavaScript

    多層に重なり合う美しいグラデーションの背景を実装できるjQueryプラグイン「SHARDS」

    多層に重なり合う美しいグラデーションの背景を実装できるjQueryプラ…

  3. Tipr

    JavaScript

    軽量、フラット、シンプルなツールチップを実装できるjQueryプラグイン「Tipr」

    Tiprはフラットでシンプルなツールチップを実装することができるjQu…

  4. Hover Carousel

    JavaScript

    超軽量なホバーカルーセルを実装できる「Hover Carousel」

    Hover Carouselは超軽量なホバーで動作するカルーセルを実装…

  5. humane.js

    JavaScript

    シンプルでモダンなさりげない通知システムを実装できる「humane.js」

    humane.jsはフレームワークなどに依存しないシンプルでモダンな通…

最近の記事

  1. M360bt

アーカイブ

PAGE TOP