Kaynak Kodları
<div class="circle-timer-box">
<svg viewBox="0 0 180 180">
<circle class="circle-bg" cx="90" cy="90" r="75" />
<circle class="circle-bar" id="pomoSvgBar" cx="90" cy="90" r="75" />
</svg>
<div class="circle-inner-label">
<span id="pomoTimeTxt">25:00</span>
</div>
</div>
.circle-timer-box {
position: relative;
width: 180px;
height: 180px;
}
.circle-timer-box svg {
transform: rotate(-90deg);
width: 100%;
height: 100%;
}
.circle-bg {
fill: none;
stroke: rgba(255, 255, 255, 0.08);
stroke-width: 10;
}
.circle-bar {
fill: none;
stroke: #00f0ff;
stroke-width: 10;
stroke-linecap: round;
stroke-dasharray: 471; /* 2 * PI * 75 */
stroke-dashoffset: 0;
transition: stroke-dashoffset 1s linear;
}
let total = 25 * 60;
let remaining = total;
let timer = null;
const circ = 2 * Math.PI * 75; // 471
function update() {
const pct = remaining / total;
const offset = circ * (1 - pct);
document.getElementById('pomoSvgBar').style.strokeDashoffset = offset;
const m = Math.floor(remaining / 60);
const s = remaining % 60;
document.getElementById('pomoTimeTxt').textContent =
`${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
}
document.getElementById('pomoStartBtn').addEventListener('click', () => {
if (timer) {
clearInterval(timer);
timer = null;
} else {
timer = setInterval(() => {
if (remaining > 0) {
remaining--;
update();
}
}, 1000);
}
});