JavaScript

アニメーション付きの水平・垂直プログレスメーターを実装できる「jQMeter」

jQMeterはアニメーションが付いた水平・垂直のプログレスメーターを実装することができるjQueryプラグインです。サイズやカラーなど細かいデザインをオプションでカスタマイズすることができるのでいろんなサイトで使いやすそうなプログレスバーですね。

jQMeter

以下からjQMeterのデモや詳細を見ることができます。

jQMeter

Gerardo Larios – Web Developer and Designer

ページが読み込まれた際に、各メーターが自分の数値までアニメーションしながら伸びていきます。動きがあることで進捗度具合に意識をもっていきやすいですね。

使い方もこのようにdivを設置してjQMeterをセッティングするだけという手軽さ。

<div id="jqmeter-container"></div>
<script type="text/javascript">
$(document).ready(function(){
    $('#jqmeter-container').jQMeter();
});
</script>

オプションを使うことでwidthやheight、背景カラーやバーカラーを指定することができます。他にもアニメーションスピードを設定したりといったことも可能です。

jQMeter

関連記事

  1. Grasp Mobile Progress Circle
  2. JavaScript

    指定した要素をパカパカと点滅させることができる「jquery.flicker」

    とてもシンプルなプラグインだったのでメモがてらご紹介します。指定した要…

  3. Slyder

    JavaScript

    レスポンシブ対応のスライダーナビゲーションを実装できる「Slyder」

    Slyderはレスポンシブに対応したスライダーナビゲーションを実装でき…

  4. Lity

    JavaScript

    超軽量でアクセシブル・レスポンシブなLightboxを実装できる「Lity」

    Lityは、超軽量でアクセシブル・レスポンシブなLightboxプラグ…

  5. Typed.js

    JavaScript

    プログラムを入力するようにタイプするエフェクトを実装できる「Typed.js」

    Typed.jsは、プログラムを入力するように文字をタイプしてくれるエ…

  6. jquery.autoscroll-text-tape

最近の記事

  1. M360bt

アーカイブ

PAGE TOP