timer
+
Home
About
Help
F.A.Q
Blog
Generate a free countdown timer for your website
Countdown timer to: 2023-12-10T03:29:35.946-05:00
-
Days
-
Hours
-
Minutes
-
Seconds
Future time / date
This is the end of the countdown in Date / Time format. 2023-12-10T03:29:35
Font
Customize the font (using Google Fonts).
Background
Text
Height (px)
Height of the image in pixels. The image will be resized to fit
Width (px)
Width of the image in pixels. The image will be resized to fit
Numbers Y (%)
This is the Y axis position of the numbers in the countdown.
Labels Y (%)
This is the Y axis position of the labels in the countdown.
Redirect to (URL)
This is the URL you want to redirect to when the countdown expires.
Download .SVG File
Download and host the SVG file yourself. This is the best option.
View SVG source
<svg id="_6w7512" viewBox="0 0 650 250" fill="#000000" xmlns="http://www.w3.org/2000/svg" aria-labelledby="_6w7512_title _6w7512_desc" > <title> Countdown timer to: 2023-12-10T03:29:35.946-05:00 </title> <desc> A countdown timer to 2023-12-10T03:29:35.946-05:00 with days, hours, minutes, and seconds displayed. </desc> <rect x="0" y="0" width="650" height="250" style="fill: #ffffff;" /> <text x="12.5%" y="55%" text-anchor="middle" name="days"> - </text> <text x="12.5%" y="75%" class="label" text-anchor="middle"> Days </text> <text x="37.5%" y="55%" text-anchor="middle" name="hours"> - </text> <text x="37.5%" y="75%" class="label" text-anchor="middle"> Hours </text> <text x="62.5%" y="55%" text-anchor="middle" name="minutes"> - </text> <text x="62.5%" y="75%" class="label" text-anchor="middle"> Minutes </text> <text x="87.5%" y="55%" text-anchor="middle" name="seconds"> - </text> <text x="87.5%" y="75%" class="label" text-anchor="middle"> Seconds </text> <text x="50%" y="50%" text-anchor="middle" name="end" class="label" visibility="hidden"> Expired </text> <script type="text/javascript"> (() => { const loadTime = new Date("2023-12-10T03:29:35.946-05:00"); const [days, hours, minutes, seconds, end] = document.querySelectorAll('svg > [name]'); const run= () => { const timeDiff = loadTime - Date.now(); const totalSeconds = Math.max(0, Math.floor(timeDiff / 1000)); const expired = totalSeconds <= 0; const [daysDiff, hoursDiff, minutesDiff, secondsDiff] = [ Math.max(Math.floor(totalSeconds / 86400), 0), Math.max(Math.floor((totalSeconds % 86400) / 3600), 0), Math.max(Math.floor((totalSeconds % 3600) / 60), 0), Math.max(totalSeconds % 60, 0) ]; days.textContent = daysDiff.toLocaleString(); hours.textContent = hoursDiff; minutes.textContent = minutesDiff; seconds.textContent = secondsDiff; if( expired ) { clearInterval(window.countdown_timer); document.querySelectorAll('text').forEach((el) => el.setAttribute( 'visibility', el.getAttribute("visibility") === "hidden" ? "visible" : "hidden" )); }; }; window.countdown_timer = setInterval(run, 1000); run(); })(); </script> <style type="text/css"> @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap'); #_6w7512 { font-family: Montserrat; height: 100%; width: 100%; max-width: 650px; max-height: 250px; preserveAspectRatio: xMidYMid meet; } #_6w7512 text { font-size: 6rem; font-weight: 600; } #_6w7512 text.label { font-size: 2rem; font-weight: 400; } </style> </svg>
Copy embed code
This will allow you to embed the countdown in your website.
View embed code
<iframe sandbox="allow-top-navigation allow-scripts" style="border: none; min-height: 250px; width: 100%; max-height: 100%; max-width: 100%; display: block;" src="https://timer.plus/timer.html?backgroundColor=%23ffffff&textColor=%23000000&width=650&height=250&numberY=55&labelY=75&timezone=America%2FNew_York&font=Montserrat&endMessage=Expired&end=1702196975946"></iframe>
Copy direct URL
Send this hosted URL to your friends and family. This is the easiest option.
View url
https://timer.plus/timer?backgroundColor=%23ffffff&textColor=%23000000&width=650&height=250&numberY=55&labelY=75&timezone=America%2FNew_York&font=Montserrat&endMessage=Expired&end=1702196975946