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. Timeline

    JavaScript

    水平・垂直に対応したVanilla JSによるタイムライン実装「Timeline」

    Timelineは水平・垂直に対応したVanilla JSを使ったタイ…

  2. no-image
  3. CurvedText

    JavaScript

    曲線上にテキストを配置できるjQueryプラグイン「CurvedText」

    CurvedTextというjQueryプラグインを使えば、任意の曲線上…

  4. marginotes

    JavaScript

    テキストの余白に注釈をつけて読みやすい記事をつくれる「marginotes」

    marginotesは、クールなマージンノートを作成するjQueryプ…

  5. SWAPMYLI

    JavaScript

    スライドが切り替わるタイミングも分かりやすく表示させるギャラリーを実装できるjQueryプラグイン「…

    シンプルでよさそうだったのでメモしときます。スライドが切り替わるタイミ…

最近の記事

  1. MacBook AirとHyperJuiceのモバイルバッテリー
  2. サラテクト 虫よけシート
  3. Apple SDカードリーダー
  4. 10種の野菜と5種のビーンズ サラダラップとドリップコーヒー
  5. EOS RP
PAGE TOP