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

PleaseWaitローディングアイコンをオシャレに実装することができる「PleaseWait」前のページ

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

関連記事

  1. Image Figure Caption effects
  2. SmartPhoto.js

    JavaScript

    レスポンシブなイメージビューアを実装できる「SmartPhoto.js」

    SmartPhoto.jsは、レスポンシブに対応したかっこいいイメージ…

  3. OneBook3d

    JavaScript

    フォトアルバム(ブック)に最適なjQueryプラグイン「OneBook3d」

    OneBook3dはブラウザ上でフォトアルバム(ブック)を作るのにとて…

  4. Simple Modal

    JavaScript

    レスポンシブ対応の軽量・シンプルなモーダル「Simple Modal」

    Simple Modalはレスポンシブに対応した軽量でシンプルなモーダ…

  5. no-image

    JavaScript

    円形に広がるメニュー実装「expanding action button」

    expanding action buttonは円形に広がるメニューを…

  6. no-image

    JavaScript

    シンプルな円形のカラーピッカーを実装できる「jQuery-Colorwheel」

    jQuery-Colorwheelはシンプルな円形によるカラーピッカー…

最近の記事

  1. ナイトロコーヒー
  2. チーズベーコンエッグバーガー
  3. ランチセットA
PAGE TOP