Countdown Template

The Countdown template provides a maintenance page with a dynamic countdown timer that shows visitors exactly when your site will be back online. It’s perfect for scheduled maintenance periods or for building anticipation before a site launch.

Features

• Dynamic countdown timer showing days, hours, minutes, and seconds
• Automatic page reload when the countdown finishes
• Automatic disabling of maintenance mode when the countdown ends
• All standard customization options (logo, title, description, etc.)

Configuration

To use the Countdown template, set the template property to "countdown" and provide a countdown date:

astro.config.mjs

import { defineConfig } from "astro/config";
import maintenance from "astro-maintenance";

export default defineConfig({
  integrations: [
    maintenance({
      enabled: true,
      template: "countdown",
      title: "Coming Soon!",
      description: "Our new website is launching soon.",
      logo: "/logo.png", // Optional - path to your logo in the public folder
      countdown: "2025-06-01T12:00:00Z", // Launch date in UTC (note the 'Z' for UTC timezone)
      emailAddress: "[email protected]", // Optional
      emailText: "Questions? Contact us at:", // Optional
      copyright: "© 2025 Your Company", // Optional
      override: "preview", // Optional - access your site with ?preview in the URL
    }),
  ],
});

Countdown Timer Details

The countdown timer has several important features:

• UTC Timezone: The countdown date must be specified in UTC timezone (add Z suffix to ISO date string)
• Automatic Disabling: When the countdown reaches zero, maintenance mode automatically disables itself
• Auto-reload: If there’s a time mismatch, the page will attempt to reload every 10 seconds until maintenance mode is disabled
• Responsive Design: The timer displays properly on all device sizes

Customization Options

The Countdown template supports all standard options plus the countdown-specific option:

Option	Description
countdown	ISO date string for when maintenance ends (in UTC timezone)
title	The main heading displayed on the maintenance page
description	Descriptive text explaining the maintenance or launch
logo	Path to your logo image (must be in your public folder)
emailAddress	Contact email address for visitors
emailText	Text label displayed before the email address
copyright	Copyright text for the footer
override	Query parameter to bypass the maintenance page

When to Use Countdown Template

The Countdown template is ideal for:

• Scheduled maintenance with a known end time
• Building anticipation for a new site launch
• When you want to automatically disable maintenance mode after a specific time
• When you want to display a professional countdown to your visitors

Example Result

When configured as shown above, visitors to your site will see a maintenance page with your logo, custom title and description, and a countdown timer showing days, hours, minutes, and seconds until the specified date.

After the countdown reaches zero, the maintenance page will automatically disable itself, and visitors will see your actual site.

Next Steps

Explore other templates:

• Simple Template - A clean, minimal maintenance page
• Construction Template - Show an “under construction” themed page
• Custom Templates - Create your own custom template