How can I make a 10 second countdown timer before a download in blogger - BloggerFreeCodes
News Update
Loading...

Saturday, February 15, 2020

How can I make a 10 second countdown timer before a download in blogger


CODE

<!--code by: bloggerfreecodes.blogspot.com.com--><script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- anupam404 link ads -->
<br />
ADSENSE ADS
<br />
<div class="bloggerfreecodest">
<center>
Please Enable Ads / and Plz Wait 15 Sec For Loading Ads, We Are Not Use Any Popup Ads, We Hates Popups Ads, We are Work Very Hard So Please Enable Ads, ..!!</center>
</div>
<center>
<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div dir="ltr" style="text-align: left;" trbidi="on">
<center>
<span id="countdown"><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFKP9XCC8R9Ywbmi5kQrVPpFzPODCX-bRS9KE3ClkczQDA9TVNbnmSTpA7xwirGnyus5QbMvx77vDx_-VsOJJ1BA5X7MamxBdQruFGrG8LtJXw-axZxmJxazLYhI1QvBmy9JgJsA8Iu_hn/s1600/animated_progress_bar.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="20" data-original-width="196" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFKP9XCC8R9Ywbmi5kQrVPpFzPODCX-bRS9KE3ClkczQDA9TVNbnmSTpA7xwirGnyus5QbMvx77vDx_-VsOJJ1BA5X7MamxBdQruFGrG8LtJXw-axZxmJxazLYhI1QvBmy9JgJsA8Iu_hn/s1600/animated_progress_bar.gif" /></a></div>
</span></center>
</div>
</div>
</center>
</div>
<br />
<div style="text-align: center;">
<div class="clear">
</div>
<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
ADSENSE ADS
<br />
<center>
<a class="bloggerfreecodesdownload" href="https://draft.blogger.com/?link" id="download_link" style="display: none;"><span style="color: white;"><b>Download</b></span></a>
<noscript>JavaScript needs to be enabled in order to be able to download.</noscript></center>
<script type="application/javascript">
(function(){
   var message = "%d seconds before download link appears";
   // seconds before download link becomes visible
   var count = 20;
   var countdown_element = document.getElementById("countdown");
   var download_link = document.getElementById("download_link");
   var timer = setInterval(function(){
      // if countdown equals 0, the next condition will evaluate to false and the else-construct will be executed
      if (count) {
          // display text
          countdown_element.innerHTML = "You have to wait %d seconds.".replace("%d", count);
          // decrease counter
          count--;
      } else {
          // stop timer
          clearInterval(timer);
          // hide countdown
          countdown_element.style.display = "none";
          // show download link
          download_link.style.display = "";
      }
   }, 1000);
})();
</script>
</div>
</div>
<br />
ADSENSE ADS
<br />
ADSENSE ADS

<style>
.bloggerfreecodest {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style><!--code by: bloggerfreecodes.blogspot.com.com-->
CSS
<!--code by: bloggerfreecodes.blogspot.com.com--> /* Download */
.bloggerfreecodesdownload{display:inline-block;position:relative;padding:10px 25px;background-color:#ff0000;color:#fff;font-family:sans-serif;text-decoration:none;font-size:.9em;text-align:center;text-indent:15px}.bloggerfreecodesdownload:hover{background-color:#333;color:#fff}.bloggerfreecodesdownload:after,.bloggerfreecodesdownload:before{content:' ';display:block;position:absolute;left:15px;top:52%}.bloggerfreecodesdownload:before{width:10px;height:2px;border-style:solid;border-width:0 2px 2px}.bloggerfreecodesdownload:after{width:0;height:0;margin-left:3px;margin-top:-7px;border-style:solid;border-width:4px 4px 0 4px;border-color:transparent;border-top-color:inherit;animation:downloadArrow 2s linear infinite;animation-play-state:paused}.bloggerfreecodesdownload:hover:before{border-color:#ff0000}.bloggerfreecodesdownload:hover:after{border-top-color:#ff0000;animation-play-state:running}@keyframes downloadArrow{0%{margin-top:-7px;opacity:1}0.001%{margin-top:-15px;opacity:0}50%{opacity:1}100%{margin-top:0;opacity:0}}<!--code by: bloggerfreecodes.blogspot.com.com-->

Share with your friends

Add your opinion
Disqus comments
Notification
This is just an example, you can fill it later with your own note.
Done