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

    JavaScript

    シンプルなスライディングメニューを実装できる「Sliiide」

    Sliiideはシンプルなスライディングメニューを実装することができる…

  2. Radial Progress Bars

    JavaScript

    アニメーション付きのサークルプログレスバー「Radial Progress Bars」

    Radial Progress Barsは、アニメーション付きのサーク…

  3. Stacked Strips

    JavaScript

    スタックしながらスクロールできるエフェクト実装「Stacked Strips」

    Stacked StripsはWebページをスクロールする時に、スタッ…

  4. no-image

    JavaScript

    フォームに文字制限を設定できるjQueryプラグイン「Character Limit」

    Character Limitは、フォーム要素に文字制限を設定するため…

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

    JavaScript

    jQueryのif文を使ってタグやクラス名によって条件分岐するやり方

    jQueryで普通にif文を使った条件分岐のやり方です。指定したタグや…

  6. HoldOn.js

    JavaScript

    ユーザーの待機中に表示させるアニメーション実装「HoldOn.js」

    HoldOn.jsはユーザーが待機している間に表示させるアニメーション…

最近の記事

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

Facebookページ

PAGE TOP