jQuery PieTimer

JavaScript

時間の経過とともに円形が欠けていくタイマー「jQuery PieTimer」

jQuery PieTimerは時間の経過とともに円形のデザインが欠けていくアニメーション付きのタイマーを実装することができるjQueryプラグインです。残り時間があとどのくらいなのか一目で認識しやすいのがいいですね。

jQuery PieTimer

デモ

Start Timerというボタンをクリックするとタイマーが開始されます。開始後にPause Timerをクリックすると停止させることができます。

開始直後は円形のデザインをしていますが、時間が経つにつれてどんどん円の形が欠けていき、最後はなくなってしまいます。

動きも滑らかで、見ているだけで時間を意識してしまいますね。

こんな感じでカラーや幅・高さなどをオプションで指定できます。

$('#demo').pietimer({
    seconds: 10,
    color: 'rgba(0, 0, 0, 0.8)',
    height: 100,
    width: 100
}

というわけで、円形タイマーを実装したい方は是非チェックしてみてはいかがでしょうか。

jQuery PieTimer

関連記事

  1. Combodate

    JavaScript

    日付や時間をドロップダウン式にしてくれる「Combodate」

    Combodateは日付や時間の入力をドロップダウン式に置き換えてくれ…

  2. ALighter

    JavaScript

    任意のテキストの場所に光を当ててくれるjQueryプラグイン「ALighter」

    ちょっとしたアクセントに使えそうですね。任意のテキストの場所に光を当て…

  3. no-image

    JavaScript

    依存関係のないタグ付け機能を実装できる「taggle.js」

    taggle.jsは依存関係のないタグ付け機能を実装できるのが特徴です…

  4. Changing Background Color while scrolling
  5. Rate Yo!

    JavaScript

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

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

  6. Bricks.js

    JavaScript

    超高速なMasonryレイアウトを実装できる「Bricks.js」

    Bricks.jsは、固定した幅で配置する画像などの要素をすばやく配置…

最近の記事

  1. s9+
  2. SRS-LSR200
  3. QC30
  4. リンツ リンドール

アーカイブ

PAGE TOP