Ultra Countdown Documentation

Getting Started

Ultra Countdown is a powerful, flexible countdown timer plugin for jQuery. It ships with 20 beautiful themes and a visual builder for easy customization.

Installation

Step 1: Include Files

<!-- CSS -->
<link rel="stylesheet" href="css/countdown-plugin.css">

<!-- jQuery (required) -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<!-- Plugin -->
<script src="js/countdown-plugin.js"></script>

Step 2: Add Container

<div id="myCountdown"></div>

Step 3: Initialize

$('#myCountdown').ultraCountdown({
    targetDate: '2025-12-31 23:59:59',
    theme: 'flip'
});

Options

Themes

Ultra Countdown includes 20 unique, professionally designed themes:

Methods

Control your countdown programmatically:

// Start the countdown
$('#myCountdown').ultraCountdown('start');

// Stop/pause the countdown
$('#myCountdown').ultraCountdown('stop');

// Reset to initial state
$('#myCountdown').ultraCountdown('reset');

// Destroy the instance
$('#myCountdown').ultraCountdown('destroy');

// Update an option
$('#myCountdown').ultraCountdown('setOption', 'theme', 'night');

Events

Use callbacks to respond to countdown events:

$('#myCountdown').ultraCountdown({
    targetDate: '2025-12-31 23:59:59',
    
    onInit: function(time) {
        console.log('Countdown initialized!', time);
    },
    
    onTick: function(time) {
        console.log('Time remaining:', time.days, 'days');
    },
    
    onFinish: function() {
        alert('Countdown finished!');
        // Redirect, show modal, etc.
    }
});

CSS Variables

Customize colors easily with CSS variables:

:root {
    --countdown-primary-color: #6366f1;
    --countdown-secondary-color: #8b5cf6;
    --countdown-accent-color: #22d3ee;
    --countdown-text-color: #f8fafc;
    --bg-color: #0f172a;
    --surface-color: #1e293b;
    
    /* Sizing */
    --item-size: 120px;
    --value-size: 3.5rem;
    --gap: 1rem;
    
    /* Spacing */
    --group-spacing: 20px;
    --digit-spacing: 5px;
    
    /* Reflection */
    --reflection-opacity: 0.3;
    --reflection-blur: 5px;
}

Examples

Basic Countdown

$('#countdown').ultraCountdown({
    targetDate: '2025-12-31 23:59:59'
});

Evergreen Timer

$('#countdown').ultraCountdown({
    evergreen: true,
    evergreenHours: 2,
    evergreenMinutes: 30,
    theme: 'gradient-box'
});

Hide Days (Short Timer)

$('#countdown').ultraCountdown({
    targetDate: '2025-01-01',
    showDays: false,
    theme: 'minimal'
});

With Finish Callback

$('#countdown').ultraCountdown({
    evergreen: true,
    evergreenMinutes: 5,
    theme: 'night',
    onFinish: function() {
        $('#countdown').html('<h2>Time is up!</h2>');
        // Show offer, redirect, etc.
    }
});

With Timezone

$('#countdown').ultraCountdown({
    targetDate: '2025-12-31 23:59:59',
    timezone: 'America/New_York',
    theme: 'flip'
});

Hide Separators

$('#countdown').ultraCountdown({
    targetDate: '2025-12-31',
    showSeparators: false,
    theme: 'glass'
});

Changelog

Track all updates and improvements to Ultra Countdown.

v1.0.0 - Initial Release

Added

• 20 Unique Themes: Flip, Circle, Glass, Neumorphism, Gradient Box, Minimal, Pill, Night, Bar, Eclipse, Ribbon, Boxed Gradient, Tachometer, Sliding, Retro, Bubbles, Origami, Cyberpunk, Flash, Elegant
• Evergreen Timer: Cookie-based countdown with checksum validation
• Visual Builder: Configure countdown visually and generate code
• Timezone Support: Target specific IANA timezones
• Visibility Controls: Show/hide days, hours, minutes, seconds, separators
• Custom Day Padding: 2-5 digit padding for days
• Scale Controls: Auto-scale and fixed scale modes
• Reflection Effect: Optional reflection with opacity/blur controls
• Spacing Controls: Group and digit spacing customization
• Animation Styles: None, Pulse, Slide, Flash
• Callbacks: onInit, onTick, onFinish
• API Methods: start, stop, reset, destroy, setOption
• Comprehensive Documentation

Future Roadmap

• v1.1.0: Additional themes, RTL support, more animations
• v1.2.0: Server-side time sync, sound effects, i18n labels