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. Product Builder

    JavaScript

    カスタマイズ性に優れたオンラインストアに役立つ「Product Builder」

    Product Builderは、カスタマイズ性に優れたオンラインスト…

  2. JavaScript

    リストなど複数の要素をランダムにフェードで表示していくjQueryプラグイン「champagne.j…

    どこかで使う機会がありそうな感じのjQueryプラグイン「champa…

  3. paroller.js

    JavaScript

    垂直・水平の動きに対応したパララックス効果を実装できる「paroller.js」

    paroller.jsは垂直・水平方向の動きに対応したパララックス効果…

  4. SMINT

    JavaScript

    1ページだけのWebサイトに最適なスクロール移動できるナビゲーションを実装できるjQueryプラグイ…

    1ページだけのWebサイトを作る際にとても役立ちそうですね。ナビゲーシ…

  5. Monthly.js

    JavaScript

    レスポンシブに対応したカレンダーを実装できる「Monthly.js」

    Monthly.jsはレスポンシブに対応したシンプルで美しいカレンダー…

  6. no-image

最近の記事

  1. 梅
  2. CAR-HLD12BK
  3. OWL-LPB6701LA

アーカイブ

PAGE TOP