Circular Progress Bar Countdown (Original)

Add-ons

2026-07-26 00:56 7 次浏览 • 0 次下载 10.1KB

Circular Progress Bar Countdown (Original)

Plugin description: Implements a circular countdown using CSS and jQuery. Compatible with IE8 and above (with some visual differences), but works correctly.

Last updated: 2018/6/14 5:16:45 PM

Changelog:Modified CSS for Safari compatibility.

Usage

Include the jQuery library and /jquery.tzineClock.js.

1 2	`<script` `src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>` `<script` `src="time/jquery.tzineClock.js"></script>`

hmtl

<div  data-time="2018-06-01 14:59:00" data-type="time" id="fancyClock1"></div>
<div  data-time="2019-09-24 12:12:12" data-type="dayTime" id="fancyClock"></div>

$('#fancyClock').tzineClock({
    // Circle class name and the color image for the current circle
    colors: ['circle1', 'circle2', 'circle3', 'circle4'],
    // Text displayed inside the circle
    words: ['Days', 'Hours', 'Minutes', 'Seconds'],
});