Countdown Timer Pro

Premium HTML5 Canvas Countdown Timer - Version 1.0.0

Introduction

Countdown Timer Pro is a premium, feature-rich countdown/countup timer built with HTML5 Canvas and jQuery. It features beautiful animations, extensive customization options, and full programmatic control via JavaScript.

Features

🚀 Three Advanced Features

✨ Visual Features

⚙️ Core Features

Quick Start

📋 Important: Countdown Timer Pro requires jQuery 3.0 or higher. jQuery is not included in this package - you must include it separately in your project.

Step 1: Include jQuery

Add jQuery to your HTML page (you can use a CDN or host it locally):

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Note: You can also download jQuery and host it on your server for better performance.

Step 2: Include Countdown Timer Pro Files

Add the CSS and JavaScript files to your HTML page:

<link rel="stylesheet" href="countdown-timer-pro.css">
<script src="countdown-timer-pro.js"></script>

Make sure these files are in the same directory as your HTML file, or adjust the paths accordingly.

Step 3: Create a Container Element

Add a container div where you want the timer to appear:

<div id="my-timer" class="countdown-timer-pro"></div>

You can use any ID or class name, just make sure it matches in the initialization code.

Step 4: Initialize the Timer

Initialize the timer with JavaScript (make sure jQuery is loaded first):

<script>
$(document).ready(function() {
    $('#my-timer').countdownTimerPro({
        timeType: 'countdown',
        duration: 3600 // 1 hour in seconds
    });
});
</script>

The timer will start automatically when the page loads. See the examples below for more configuration options.

Premium Base Style Example

Here's an example using the premium base style (the default professional style):

$('#my-timer').countdownTimerPro({
    timeType: 'countdown',
    duration: 86400, // 24 hours
    width: 900,
    height: 450,
    fontSize: 56,
    circleThickness: 10,
    colors: {
        circle: '#667eea',
        circleBackground: '#f0f4ff',
        text: '#2c3e50'
    },
    fontFamily: "'Segoe UI', Tahoma, sans-serif",
    fontWeight: '700',
    labelFontWeight: '500'
});

Configuration Options

Basic Options

Display Options

Styling Options

Color Options

colors: {
    circle: '#6d38d6',
    circleBackground: '#e0e0e0',
    text: '#333333'
}

Multicolor Animation

multicolor: {
    enabled: true,
    colors: ['#6d38d6', '#ff6b6b', '#4ecdc4', '#ffe66d']
}

Examples

Premium Base Style (Default)

$('#timer').countdownTimerPro({
    timeType: 'countdown',
    duration: 86400, // 24 hours
    width: 900,
    height: 450,
    fontSize: 56,
    circleThickness: 10,
    colors: {
        circle: '#667eea',
        circleBackground: '#f0f4ff',
        text: '#2c3e50'
    },
    fontFamily: "'Segoe UI', Tahoma, sans-serif",
    fontWeight: '700',
    labelFontWeight: '500'
});

Countup Timer

$('#timer').countdownTimerPro({
    timeType: 'countup',
    startTime: Math.floor(Date.now() / 1000) - 3600, // 1 hour ago
    width: 900,
    height: 450,
    fontSize: 56,
    circleThickness: 10,
    colors: {
        circle: '#667eea',
        circleBackground: '#f0f4ff',
        text: '#2c3e50'
    }
});

Server-side Timestamp

$('#timer').countdownTimerPro({
    timeType: 'countdown',
    timeSource: 'server',
    endTime: 1734567890, // Unix timestamp (seconds)
    width: 900,
    height: 450,
    fontSize: 56,
    circleThickness: 10,
    colors: {
        circle: '#667eea',
        circleBackground: '#f0f4ff',
        text: '#2c3e50'
    }
});

With Multicolor Animation

$('#timer').countdownTimerPro({
    timeType: 'countdown',
    duration: 86400,
    width: 900,
    height: 450,
    fontSize: 56,
    circleThickness: 10,
    colors: {
        circle: '#667eea',
        circleBackground: '#f0f4ff',
        text: '#2c3e50'
    },
    multicolor: {
        enabled: true,
        colors: ['#667eea', '#764ba2', '#f093fb', '#4facfe']
    }
});

View More Examples

Open customizer-panel.html to access the Premium Customizer Panel with live preview, or check example.html to see the premium base style in action.

Premium Customizer Panel: Use the included customizer-panel.html to visually customize every aspect of your timer. The customizer provides a live preview and generates ready-to-use code. Choose from 13 premium presets (Premium Base, Luxury Gold, Dark Neon, Glassmorphism, Minimalist, Cyberpunk, Elegant Classic, Ocean Breeze, Sunset Glow, Forest Green, Black Friday, Christmas, Product Launch) or create your own unique design.

Liquid Effect: The timer features a distinctive 3D liquid animation with realistic waves, bubbles, and evaporation particles. This effect is always enabled and provides a premium visual experience.

Animations: Enable Pulse Glow for a pulsating glow effect, or Gradient Wave for animated gradient waves on circle borders.

Browser Support

Note: Requires modern browsers with HTML5 Canvas and ES6 support. Requires jQuery 3.x (not included - user must provide).

Requirements

Documentation

For complete documentation, please refer to the following files included in this package:

Support

For support, please contact through your purchase platform (Envato CodeCanyon). Please prepare your purchase code and Envato username when opening a support ticket.

License

This item is sold exclusively on Envato Market (CodeCanyon). Usage of this item is governed by the Envato Market Regular and Extended Licenses. For full license terms, please refer to the license section on the item page on CodeCanyon.

© 2025 Xtreme Code. All rights reserved.
Countdown Timer Pro - Version 1.0.0