"gerisayım v5"
Bootstrap 3.1.0 Snippet by muhittinbudak

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <title>YKS Sayaç</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style> body{ background:#111; color:white; font-family:Arial; text-align:center; } .wrapper{ display:flex; justify-content:center; gap:30px; margin-top:100px; } .circle{ position:relative; width:160px; height:160px; } svg{ transform:rotate(-90deg); } circle{ fill:none; stroke-width:10; } .bg{ stroke:#333; } .progress{ stroke:#00d9ff; stroke-linecap:round; transition:0.5s; } .number{ position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); text-align:center; } .number span{ display:block; font-size:30px; font-weight:bold; } .label{ font-size:14px; margin-top:5px; color:#aaa; } </style> </head> <body> <div class="wrapper"> <div class="circle"> <svg width="160" height="160"> <circle class="bg" cx="80" cy="80" r="70"></circle> <circle class="progress day" cx="80" cy="80" r="70"></circle> </svg> <div class="number"> <span id="days">0</span> <div class="label">Gün</div> </div> </div> <div class="circle"> <svg width="160" height="160"> <circle class="bg" cx="80" cy="80" r="70"></circle> <circle class="progress hour" cx="80" cy="80" r="70"></circle> </svg> <div class="number"> <span id="hours">0</span> <div class="label">Saat</div> </div> </div> <div class="circle"> <svg width="160" height="160"> <circle class="bg" cx="80" cy="80" r="70"></circle> <circle class="progress minute" cx="80" cy="80" r="70"></circle> </svg> <div class="number"> <span id="minutes">0</span> <div class="label">Dakika</div> </div> </div> <div class="circle"> <svg width="160" height="160"> <circle class="bg" cx="80" cy="80" r="70"></circle> <circle class="progress second" cx="80" cy="80" r="70"></circle> </svg> <div class="number"> <span id="seconds">0</span> <div class="label">Saniye</div> </div> </div> </div> <script> $(function(){ const targetDate = new Date("2026-06-20 10:00:00").getTime(); const radius = 70; const circumference = 2 * Math.PI * radius; $(".progress").css({ "stroke-dasharray": circumference, "stroke-dashoffset": circumference }); function setProgress(selector, percent){ let offset = circumference - (percent / 100) * circumference; $(selector).css("stroke-dashoffset", offset); } function updateCountdown(){ let now = new Date().getTime(); let distance = targetDate - now; let days = Math.floor(distance / (1000 * 60 * 60 * 24)); let hours = Math.floor((distance / (1000 * 60 * 60)) % 24); let minutes = Math.floor((distance / (1000 * 60)) % 60); let seconds = Math.floor((distance / 1000) % 60); $("#days").text(days); $("#hours").text(hours); $("#minutes").text(minutes); $("#seconds").text(seconds); setProgress(".day", (days % 365) / 365 * 100); setProgress(".hour", hours / 24 * 100); setProgress(".minute", minutes / 60 * 100); setProgress(".second", seconds / 60 * 100); } updateCountdown(); setInterval(updateCountdown, 1000); }); </script> </body> </html>

Questions / Comments: