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

    テキストを中央に向かうにつれて大きくしたりできるjQueryプラグイン「jqIsoText」

    結構おもしろかったのでメモしときます。テキストに簡単なエフェクトをかけ…

  2. Micromodal.js

    JavaScript

    アクセシブルで軽量なモーダルダイアログを実装できる「Micromodal.js」

    Micromodal.jsは、アクセシブルでファイル容量も軽量なモーダ…

  3. ScrollTrigger

    JavaScript

    スクロールの位置をベースにしたアニメーション「ScrollTrigger」

    ScrollTriggerはユーザーがスクロールする位置をベースにした…

  4. no-image

    JavaScript

    サイドバーをフローティングできる「FloatSidebar.js」

    FloatSidebar.jsはサイドバーをフローティングできるVan…

  5. jQuery Modal

    JavaScript

    シンプルでレスポンシブなモーダルボックス「jQuery Modal」

    jQuery Modalはシンプルでレスポンシブに対応したモーダルボッ…

最近の記事

  1. 10種の野菜と5種のビーンズ サラダラップとドリップコーヒー
  2. EOS RP
  3. COMOLI シルクネルジャケット シルクネルドローストリングパンツ
  4. スターバックス ハシエンダ アルサシア

アーカイブ

PAGE TOP