| <head> | |
| <script type="text/javascript"> | |
| // Total seconds to wait | |
| var seconds = 10; | |
| function countdown() { | |
| seconds = seconds - 1; | |
| if (seconds < 0) { | |
| // Chnage your redirection link here | |
| window.location = "https://duckdev.com"; | |
| } else { | |
| // Update remaining seconds | |
| document.getElementById("countdown").innerHTML = seconds; | |
| // Count down using javascript | |
| window.setTimeout("countdown()", 1000); | |
| } | |
| } | |
| // Run countdown function | |
| countdown(); | |
| </script> | |
| </head> | |
| <div id="countdown"> | |
| <div id="countdown-number"></div> | |
| <svg> | |
| <circle r="18" cx="20" cy="20"></circle> | |
| </svg> | |
| </div> |
I used stroke-dasharray and stroke-dashoffset in a circle svg element. Setting stroke-dasharray to a full circle (e.g. 113px) and animating the stroke-dashoffset from 0px to 113px makes the circle's stroke disappear gradually.
A Pen by Evan Walters on CodePen.
| var countdownNumberEl = document.getElementById('countdown-number'); | |
| var countdown = 5; | |
| countdownNumberEl.textContent = countdown; | |
| setInterval(function() { | |
| countdown = --countdown <= 0 ? 5 : countdown; | |
| countdownNumberEl.textContent = countdown; | |
| }, 1000); |
| body { | |
| height: 100%; | |
| width: 100%; | |
| background-color: #333; | |
| } | |
| #countdown { | |
| position: relative; | |
| margin: auto; | |
| margin-top: 100px; | |
| height: 40px; | |
| width: 40px; | |
| text-align: center; | |
| } | |
| #countdown-number { | |
| color: white; | |
| display: inline-block; | |
| line-height: 40px; | |
| } | |
| svg { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| width: 40px; | |
| height: 40px; | |
| transform: rotateY(-180deg) rotateZ(-90deg); | |
| } | |
| svg circle { | |
| stroke-dasharray: 113px; | |
| stroke-dashoffset: 0px; | |
| stroke-linecap: round; | |
| stroke-width: 2px; | |
| stroke: white; | |
| fill: none; | |
| animation: countdown 5s linear infinite forwards; | |
| } | |
| @keyframes countdown { | |
| from { | |
| stroke-dashoffset: 0px; | |
| } | |
| to { | |
| stroke-dashoffset: 113px; | |
| } | |
| } |