Jquery Line Progress Bar

JavaScript

横棒の軽量なプログレスバーを実装できる「Jquery Line Progress Bar」

Jquery Line Progress Barは、横棒による軽量なプログレスバーを実装することができるjQueryプラグインです。アニメーション付きでシンプルなデザインがとても見やすく、オプションによるカスタマイズも可能になっています。

カラーや高さの設定なども可能

デモ

デモページには、Basic、Fill Color、Height、Radiusnessの4つのデモが用意されています。ベーシックなタイプのものから、カラー指定、高さ設定、radius設定したものがあります。

ページを読み込みプログレスバーが表示されると、そのバーの値に合わせてメーターが伸びていきます。このような、さりげないアニメーションを備えているところもいいですね。

使い方やオプションによるカスタマイズもすごくシンプルでわかりやすくなっています。

主なオプションは、percentage、ShowProgressCount、duration、fillBackgroundColor、backgroundColor、radius、height、widthです。

進捗度の動きを表すスピードやカラー、高さや幅などを手軽にオプションからセッティングできるようになっています。ちなみに、durationのデフォルト値は1000、fillBackgroundColorのデフォルト値は#3498db、backgroundColorのデフォルト値は#EEEEEE、heightのデフォルト値は10px、widthのデフォルト値は100%です。

というわけで、シンプルながらもカスタマイズしやすい軽量のプログレスバーを実装したいという人は、ぜひチェックされてみてはいかがでしょうか?

Jquery Line Progress Bar

関連記事

  1. no-image

    JavaScript

    高さを揃えたレスポンシブな画像ギャラリー「jQuery Mosaic plugin」

    jQuery Mosaic pluginは高さを揃えたレスポンシブな画…

  2. Zooming

    JavaScript

    クールな画像ズーム機能を実装できる「Zooming」

    Zoomingはクールでかっこいい画像ズーム機能を実装することができる…

  3. jCider

    JavaScript

    レスポンシブ対応のjQueryカルーセルプラグイン実装「jCider」

    jCiderはレスポンシブ対応のシンプルなカルーセルを実装できるjQu…

  4. jQuery cardslider

    JavaScript

    カードをスライドさせるようにコンテンツを表示できる「jQuery cardslider」

    jQuery cardsliderは、コンテンツをカードのように表示し…

  5. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryで要素を挿入できるメソッドがたくさんあるので整理してみた

    jQueryでHTML要素を追加するメソッドが色々あるので整理するため…

  6. jQuery Gridly

    JavaScript

    クリックしてその場で拡大したりドラッグで配置を入れ替えたりできるプラグイン「jQuery Gridl…

    おもしろいjQueryプラグインがあったのでご紹介します。クリックして…

最近の記事

  1. フェルメール展
  2. 上島珈琲店 No.11
  3. 銀座トリコロール

アーカイブ

PAGE TOP