円形のアニメ効果付きタイマー「PieTimer」
当ページのリンクには広告が含まれています。
スポンサーリンク
円型のアニメ効果付きタイマーを作成するプラグイン「PieTimer」を紹介します。
jQueryプラグイン「PieTimer」
このプラグインを使えば、時間をアニメーション効果でカウントする円形のタイマーを作成することができます。
ページロード後に円の形にカウントがはじまり、カウント終了後にはアラートを表示することができます。
スポンサーリンク
デモの円形タイマーをご覧ください。
ソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="PieTimerのデモでーす。">
<title>PieTimer - jQueryプラグイン</title>
<link rel="stylesheet" type="text/css" href="pietimer.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="jquery.pietimer.js"></script>
<script>
$(function() {
$('#timer').pietimer({
timerSeconds: 6,
color: '#678',
fill: false,
showPercentage: true,
callback: function() {
alert("時間だよぉ〜。");
}
});
});
</script>
</head>
<body>
<h1>PieTimerのデモでーす。</h1>
<div id="timer"></div>
</body>
</html>
スポンサーリンク