Create a div element where you want the timer to appear. You can set the countdown date using the data-date attribute.
Supports both counting down to a specific date and counting up from a point in time. timecircles js download
$(".timer").TimeCircles({ circle_bg_color: "#60686F", // Background circle color fg_width: 0.05, // Foreground ring width (10% of total) bg_width: 1.2, // Background ring width animation_interval: "smooth", // "smooth" or "ticks" time: { Days: { show: false }, // Hide Days Hours: { color: "#C0C8CF" } // Custom color for Hours } }); Use code with caution. Stopwatch/Timer Example Create a div element where you want the timer to appear
$(".countdown").TimeCircles(); Use code with caution. Frequently Asked Questions It is designed to be user-friendly, responsive, and
TimeCircles is a that allows developers to create attractive circular timers, count-up timers, and countdowns. It is designed to be user-friendly, responsive, and customizable, using HTML5 Canvas to render the circles. Key Features:
Smooth, animated progress bars for seconds, minutes, hours, and days.
Yes, TimeCircles is an open-source plugin available under the MIT license, making it free for both personal and commercial projects.