<div class="scroll-indicator">
<svg class="progress-circle" width="50" height="50">
<circle class="bg" cx="25" cy="25" r="20"></circle>
<circle class="fg" cx="25" cy="25" r="20" id="progressCircle"></circle>
</svg>
<span class="icon">↑</span>
</div>
<div style="height: 1500px; padding: 20px;">Scroll down to see the circle fill.</div>
.scroll-indicator {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 100;
background: #fff;
border-radius: 50%;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.progress-circle {
transform: rotate(-90deg);
}
.bg {
fill: none;
stroke: #e5e7eb;
stroke-width: 4;
}
.fg {
fill: none;
stroke: #2563eb;
stroke-width: 4;
stroke-dasharray: 126;
stroke-dashoffset: 126;
transition: stroke-dashoffset 0.1s;
}
.icon {
position: absolute;
font-size: 1.2rem;
color: #1f2937;
}
const circle = document.getElementById("progressCircle");
const circumference = 2 * Math.PI * 20; // r=20
window.addEventListener("scroll", () => {
const scrollTop = window.scrollY;
const height = document.documentElement.scrollHeight - window.innerHeight;
const scrollPercent = scrollTop / height;
const offset = circumference - (scrollPercent * circumference);
circle.style.strokeDashoffset = offset;
});