chrome firefox IE safari chain youtube-play pocket hatena facebook feedly github google-plus rss twitter search code envelope-o home pencil website works calendar drawer tag
2015/01/06

[jQuery]シンプルでおしゃれな円形カウントダウンjQueryプラグイン「ClassyCountdown」

シンプルな円形型カウントダウンjQueryプラグイン「ClassyCountdown」をご紹介致します。Canvasを使用しており、対応ブラウザはIE9+/Chrome/Safari/Firefoxです。またライセンスはMITライセンスとなっております。

ClassyCountdown

今回ご紹介するのは、シンプルな円形カウントダウンjQueryプラグイン「ClassyCountdown」です。

Canvasを使用しており、動作もシンプルです。

fbhf1q2snM

またいくつかのカラーテーマも用意されており、おしゃれでした。

色味やフォントサイズなどを変更出来、様々なデザインに対応出来ます:)

設定

簡単な使い方をご紹介いたします。

JS

<script src="common/js/jquery.js"></script>
<script src="common/js/jquery.knob.js"></script>
<script src="common/js/jquery.throttle.js"></script>
<script src="common/js/jquery.classycountdown.js"></script>
<link rel="stylesheet" type="text/css" href="common/css/jquery.classycountdown.min.css" />
<script>
$(function(){
 $('.countdown').ClassyCountdown({
     theme: "flat-colors",
     end: $.now() + 10000
 });
});
</script>

HTML

<div class="countdown"></div>

その他の設定に関しては「ClassyCountdown」のサイトを見てください。

また、デモを作成してみました。こちらもご参考になれば幸いです。

対応ブラウザ/ライセンス

対応ブラウザはCanvasを使用しており、IE9+/Chrome/Safari/Firefoxとなっております。

また、ライセンスはMITライセンスです。

今後の励みになりますので、良かったらシェアをお願いします。

このエントリーをはてなブックマークに追加