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」をチェックしてみてください。

関連記事

  1. BetterToggle

    JavaScript

    要素を拡大しながら表示させたり非表示にしたりできるjQueryプラグイン「BetterToggle」…

    面白いjQueryプラグインがあったのでご紹介します。指定した要素を拡…

  2. Before and after slider
  3. trunk8

    JavaScript

    長い(はみ出した)テキストを「・・・」に置き換えてくれるjQueryプラグイン「trunk8」

    長いテキストやはみ出したテキストを「・・・」といった文字に置き換えてく…

  4. Amigo Sorter Plugin

    JavaScript

    タッチ対応で直感的に並べ替えできるjQueryプラグイン「Amigo Sorter Plugin」

    Amigo Sorter Pluginは、タッチ対応で直感的にリスト項…

  5. Textillate.js

    JavaScript

    テキストに面白いCSS3アニメーションを加えることができるjQueryプラグイン「Textillat…

    指定したテキストに面白いCSS3アニメーションを加えることができるjQ…

  6. jquery-scrollstop

    JavaScript

    スクロールの開始・終了時のイベントを設定できる「jquery-scrollstop」

    jquery-scrollstopはスクロールの開始・終了時のイベント…

最近の記事

  1. カメラマングローブ Grip Hot Shot III
  2. 包(つつむ)巾着ポーチ
  3. KMC-80BK
  4. 味噌ラーメン〜旨辛にんにく味噌〜

Instagram始めました

Facebookページ

PAGE TOP