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. Inspiration for Letter Effects

    JavaScript

    印象的なテキストエフェクトを実装する「Inspiration for Letter Effects」…

    anime.jsを活用した、印象的でとってもかっこいいテキストエフェク…

  2. Air Datepicker

    JavaScript

    軽量でクロスブラウザ、モダンブラウザに対応した「Air Datepicker」

    Air Datepickerは軽量でクロスブラウザ、モダンブラウザに対…

  3. t-scroll

    JavaScript

    アニメーションとともにアイテムが一つずつ現れる「t-scroll」

    t-scrollはアニメーションとともにアイテムを一つずつ表示させるこ…

  4. TV Credits

    JavaScript

    垂直・水平方向に滑らかに流れていくティッカーを実装できるjQueryプラグイン「TV Credits…

    TV Creditsは垂直方向や水平方向に流れていくティッカーを実装す…

  5. jQuery Bar Rating

    JavaScript

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

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

  6. reveal-it.js

    JavaScript

    左から右へテキストが美しくフェードイン表示する「reveal-it.js」

    reveal-it.jsはテキストが左から右へかけて徐々にフェードイン…

最近の記事

  1. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  2. ブラジルイパネマ
  3. 梅しば
  4. BM-IBCDH13RD

アーカイブ

PAGE TOP