Website elementsOffers & conversion
Countdown
A countdown timer widget, built into your site with no plugin and no library. Days, hours, minutes and seconds to a wall-clock moment in the business’s time zone, or an evergreen run that starts per visitor and is remembered in localStorage. Square, circle or plain. At zero it shows a message, hides, or counts to the next day’s or week’s occurrence. A role="timer" named by its end (“Ends Oct 3, 5:00 PM CDT”) with no aria-live, so nothing is announced as it ticks; the digits stay readable on demand.
The autumn sale ends in
Ends
The autumn sale has ended.
Your welcome offer is held for
Ends in
Your welcome offer has lapsed.
Thirty minutes from your first view, kept in this browser, so it is the same deadline when you come back.
Order within this to ship today
Next dispatch
This offer has ended.
Resets to tomorrow's 3 PM New York cut-off the moment today's passes, across daylight saving.
You'll need to give us
- The date and time it counts toNeeded to startWith its time zone. For an offer held for each visitor, say how long it lasts instead.
- What it should show once it endsA message, nothing at all, or a count to the same time the next day or week.
Send these with your request and we can start straight away. Everything else is ours to do.
Show exactly how long is left — to the end of a sale, the start of an event or today’s order cut-off — in your time zone, not the visitor’s guess.
Also called
UABB CountdownElementor Countdowncountdown timerevergreen countdown timersale timerdeadline timerorder cut-off timer
What it replaces
- UABB “Countdown” module (Beaver Builder)
- Elementor Pro Countdown widget
- evergreen timer plugins (Deadline Funnel style)
- embedded third-party countdown widgets
Good for
A real deadline: a sale that ends, an event that starts, a daily order cut-off (onEnd="repeat" every day), a webinar. Evergreen suits an offer that is genuinely held for each visitor for a set time, such as a welcome discount.
Not for
A deadline that is not real. An evergreen timer that restarts on every visit, or a sale that never ends, is a false urgency claim, and the FTC and UK CMA treat fake countdowns as a deceptive practice; this element keeps a visitor’s evergreen start on return precisely so the deadline stays true. Also not a clock or a stopwatch, and not for the page’s one line of news (announcement-bar has its own “Ends in 2 days” countdown).
Accessibility
Written so the page works for every visitor, whether they browse with a mouse, a keyboard or a screen reader, and whether or not they have asked for less motion.
- role="timer", whose implicit aria-live is “off”, with no aria-live attribute: nothing is announced as the digits tick, so a screen reader is never read seconds. The wrapper’s aria-label gives the absolute end, “Ends Oct 3, 5:00 PM CDT”, or `endedText` once ended.
- The digits stay readable when someone navigates into them: each unit is its number and its word, and screen readers get the number unpadded, so it reads “3 days 4 hours”, not “zero three 4”.
- The name changes only when the end does: a daily repeat rolling over, or an evergreen run starting.
- Without JavaScript: the static line “Ends Oct 3, 5:00 PM CDT” in a <time datetime> (an evergreen one reads “Ends in 30 minutes”). The digits from the build’s clock are not shown, because they would be stale and never tick.
- No layout shift: the script placed right after the element shows and corrects the digits before the first paint.
- prefers-reduced-motion: no tick animation on a changing digit and no ring transition; the numbers simply change.
- The square style’s fallback colors clear 4.5:1 (14.75:1); `npm run check` computes it.
Where it's live
- superherotech.ai: /elements/countdown/ (demo)
How to ask for it
“The countdown on our home page, with …”
Name it, say which page and which part of the page it goes on, and say what goes in it: your photos, your words, your colors. That is a complete request. We build it, you approve it, and it goes live. If you know it by another name, from WordPress or from another site, that works too.
More elements you can ask for: Before / After, Particle field, Mega menu, Video background, Parallax band, Scroll reveal, Business hours, News ticker, Flip box, Instagram feed, Accordion / FAQ, Card slider, Tabs, Info list, Video player, Testimonial carousel, Icon library, Animated text, Cookie consent, Animated background, Modal box, Announcement bar, Image hotspots, Info circle, Slide box, Content toggle, Off-canvas panel, Video gallery, Map and directions, Link effects, Tabcordion, Tooltip, Responsive table, Notice, Toast, Loading, Menu button, Radio group, Stepper, Tags, Scrollbox, Sticker. Or see all of them working.
More in Offers & conversion
See them all working- Content toggle
Let visitors flip between two versions of the same thing — monthly or annual prices, homes or businesses — without leaving the page.
- Sticker
Mark the sale, the new arrival or the last few in stock right on the photo, where shoppers look first.
- News ticker
Keep your latest news, offers and events turning over in one slim strip, so visitors see what is new without a banner shouting at them.
- Modal box
A box that opens when it is asked for — a click, a scroll, a hand leaving for the tab bar — and stays gone once it's been closed.
Want the countdown on your site?
Tell us about the business. We build the site with it, launch it, and change it whenever you ask.