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. Valiant 360

    JavaScript

    360度のパノラマ動画を実装できるビデオプレーヤー「Valiant 360」

    Valiant 360はブラウザ上で360度のパノラマ動画・写真を実装…

  2. JUMBLE

    JavaScript

    テキストの色をカラフルにシャッフルさせるjQueryプラグイン「JUMBLE」

    JUMBLEというjQueryプラグインを使えば、指定したテキストの色…

  3. Animsition
  4. Tilt.js

    JavaScript

    パララックスとチルトを兼ね備えたホバーエフェクト実装「Tilt.js」

    Tilt.jsはパララックスとチルトの動きを兼ね備えた滑らかなホバーエ…

  5. Grasp Mobile Progress Circle
  6. SweetModal

    JavaScript

    シンプルでエレガントなモーダルウィンドウを実装できる「SweetModal」

    SweetModalは、アラートやダイアログなどをシンプルでエレガント…

最近の記事

  1. クッキー&クリーム ポップコーン
  2. マウイチップス マウイオニオン味
  3. グリーンビーントゥーバー
  4. VS-543AS

アーカイブ

PAGE TOP