An eye-catching countdown popup for marketing campaigns with smooth animations. Perfect for creating urgency and driving conversions during limited-time offers.

• Countdown Timer: Real-time countdown with days, hours, minutes, seconds
• Smooth Animations: Beautiful entrance and exit animations
• Customizable Design: Easy to customize colors, fonts, and layout
• Responsive: Works perfectly on all devices
• Auto Show/Hide: Configurable display timing
• Close Options: Manual close or auto-dismiss
• Cookie Support: Remember user preferences
• Accessible: Built with accessibility in mind

View on CodePen

• index.html - Main HTML structure
• style.css - All styling and animations
• script.js - JavaScript functionality

<div class="countdown-popup" id="countdownPopup">
    <div class="popup-content">
        <h2>Limited Time Offer!</h2>
        <div class="countdown-timer">
            <div class="time-unit">
                <span class="number" id="days">00</span>
                <span class="label">Days</span>
            </div>
            <!-- More time units... -->
        </div>
        <button class="cta-btn">Get Offer Now</button>
        <button class="close-btn">&times;</button>
    </div>
</div>

// Initialize countdown popup
const popup = new CountdownPopup({
    targetDate: '2024-12-31T23:59:59',
    showDelay: 3000,
    autoClose: false
});

• Colors: Customize background, text, and button colors
• Typography: Change fonts, sizes, and weights
• Animations: Adjust entrance/exit animations
• Layout: Modify popup size and positioning
• Timer Style: Customize countdown timer appearance

const config = {
    targetDate: '2024-12-31T23:59:59',  // Countdown end date
    showDelay: 3000,                    // Delay before showing (ms)
    autoClose: false,                   // Auto close after countdown
    cookieName: 'popup-dismissed',      // Cookie name for dismissal
    cookieExpiry: 7,                    // Cookie expiry in days
    animationDuration: 500              // Animation duration (ms)
};

• Chrome ✅
• Firefox ✅
• Safari ✅
• Edge ✅
• IE11+ ✅

Feel free to submit issues and enhancement requests!

This project is open source and available under the MIT License.

HarmonCode - harmoncode.com

⭐ If you find this useful, please give it a star!