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. クリスマスエスプレッソロースト
  2. シーザーチキン 石窯カンパーニュ
  3. スキャルプ&ヘア リファイニング トリートメント オイル R
  4. ポーレックスの手動ミル
  5. クリスマスブロンドロースト
PAGE TOP