CSS Jquery Pie Countdown Timer

JavaScript

グラデーションが美しい円形カウントダウン「CSS Jquery Pie Countdown Timer」

円形によるカウントダウンのタイマーを実装する「CSS Jquery Pie Countdown Timer」をご紹介します。linear-gradientを活用した美しいグラデーションのデザインがとても印象的です。

CSS Jquery Pie Countdown Timer

CSS Jquery Pie Countdown Timer

デモでは円形バーが中央に表示されている数字のカウントとともに伸びて行きます。カウントが終了すると円形バーもキレイな円を描き終了します。linear-gradientによるグラデーションがとても美しいですね。見た目もシンプルなのでカウントダウンに集中できそうです。

カウントダウンの総数は「totaltime」という変数に格納されているので、ここを変更することで好きな値に設定可能です。

デザイン・機能ともにシンプルな分、いろんなシチュエーションで活用しやすいカウントダウンタイマーに仕上がっているのではないでしょうか?

というわけで、美しいグラデーションによるカウントダウンタイマーを実装したいという人は、ぜひ「CSS Jquery Pie Countdown Timer」をチェックしてみてください。

Progressively画像を徐々に読み込んでくれるJSライブラリ「Progressively」前のページ

CSSのフィルターをコントロールできるjQueryプラグイン「Philter」次のページPhilter

関連記事

  1. Cloud 9 Carousel

    JavaScript

    サクサク動作する3Dカルーセルを実装できる「Cloud 9 Carousel」

    Cloud 9 Carouselはサクサク動作する3Dカルーセルを実装…

  2. RV gallery-slider

    JavaScript

    軽量でタッチフレンドリーなギャラリースライダー「RV gallery-slider」

    RV gallery-sliderは軽量でタッチフレンドリーなギャラリ…

  3. Material ScrollTop Button
  4. Add To Cart Interaction
  5. Before and after slider
  6. Expandy Menu

    JavaScript

    マウスオーバーで広がるメニューパネル「Expandy Menu」

    Expandy Menuはマウスオーバーすると横に広がるメニューパネル…

最近の記事

  1. EOS RP
  2. COMOLI シルクネルジャケット シルクネルドローストリングパンツ
  3. スターバックス ハシエンダ アルサシア
  4. イングリッシュマフィン

アーカイブ

PAGE TOP