<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">&#8593;</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;
});

Back to Snippets

Circular Scroll Progress JS

Visualize reading progress with this unique circular indicator. Unlike standard top bars, this SVG circle fills up as the user scrolls, providing a subtle yet functional navigation aid at the bottom of the screen.

261

#javascript

#css

#scroll

#progress

#svg

#circle

#indicator

/HTML *CSS ()JS Output Live Updates

Circular Scroll Progress JS

Share Code Snippet