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. Rate Yo!

    JavaScript

    星評価(レーティング)を簡単に実装できるjQueryプラグイン「Rate Yo!」

    Rate Yo!というjQueryプラグインを使えば、SVGを使った星…

  2. Mirror Effect

    JavaScript

    ミラーエフェクトによるかっこいいスライドショー実装「Mirror Effect」

    Mirror EffectはWebサイト内でかっこいいミラーエフェクト…

  3. JavaScript

    テキストに炎のようなエフェクトを追加してくれるjQueryプラグイン「jQuery Burn」

    テキストに炎のようなエフェクトを追加してくれるjQueryプラグイン「…

  4. Vague.js

    JavaScript

    要素をぼかすことができるjQueryプラグイン「Vague.js」

    要素をぼかすことができるjQueryプラグイン「Vague.js」が面…

  5. megamenu.js

    JavaScript

    レスポンシブでスマートなメガメニューを実装できる「megamenu.js」

    megamenu.jsはjQueryを使ったレスポンシブでスマートなメ…

  6. no-image

最近の記事

  1. レンズペン3 ミニプロとレンズペン ELITE マイクロプロ
  2. カメラマングローブ Grip Hot Shot III
  3. 包(つつむ)巾着ポーチ
  4. KMC-80BK

Instagram始めました

Facebookページ

PAGE TOP