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

WebSnowjq.jsWebページに雪を降らせてくれるjQueryプラグイン「WebSnowjq.js」前のページ

ページ画面のサイズを拡大・縮小するChromeのショートカットキー次のページ拡大・縮小させるChromeのショートカットキー

関連記事

  1. JavaScript

    高さや幅が不揃いの要素をキレイに揃えてくれるjQueryプラグイン「equalize.js」

    高さや幅が不揃いの要素をキレイに揃えてくれるjQueryプラグイン「e…

  2. JavaScript

    巻き簾のようにメニューを開閉するアニメーションを実装できるjQueryプラグイン「Makisu」

    巻き簾のようにリスト化した要素を1つずつ開いていったり閉じていったりで…

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

    JavaScript

    jQueryのeachと$.eachの簡単な使い方のメモ

    jQueryのeachと$.eachの使い方のメモです。あんまり深い知…

  4. infiniteSlider2.js
  5. JavaScript

    画像を素敵なアニメーションで次々に表示させるjQueryのイメージギャラリー「Heap Shot」

    とても素敵な画像の見せ方だったのでご紹介します。jQueryプラグイン…

最近の記事

  1. Anker PowerWave Pad Alloy
  2. Anker Bolder LC30
  3. BG-R10

アーカイブ

PAGE TOP