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

    親要素の下端まで要素を固定表示できる「Scroll With Page」

    Scroll With Pageはスクロールしても特定の要素を固定表示…

  2. Effect Ideas for Card Stacks
  3. ssi-modal

    JavaScript

    フレキシブルでパワフルなモーダルウィンドウを実装できる「ssi-modal」

    ssi-modalはカスタマイズ性に優れたフレキシブルでパワフルなモー…

  4. JavaScript

    ショータイムが始まる前のスポットライトのようなjQueryプラグイン「Spotlight」

    Spotlightはショータイムが始まる前のスポットライトのようなアニ…

  5. nuContextMenu

    JavaScript

    モダンなコンテキストメニューを実装できる「nuContextMenu」

    nuContextMenuはモダンで軽量なコンテキストメニューを実装で…

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

    JavaScript

    jQueryでreplaceWithやreplaceAllを使って要素を置き換えてみる

    jQueryでreplaceWithやreplaceAllを使えば好き…

最近の記事

  1. Waterlogue
  2. macOS Mojaveのダークモード
  3. Olli
  4. 単語帳メーカー(Flashcard Maker App)

Facebookページ

PAGE TOP