Scroll Progress Indicators

In this post, we will design scroll progress indicators. In this snippet, we will design 3 different types of scroll progress indicator. We will use HTML, CSS, and Javascript to draft our demos. Let's start with the HTML structure of all indicators.

HTML Structure

-> Topbar Indicator

<!-- Topbar Indicator -->
<div class="topbar" id="topbar" dd-progress="0"></div>

-> Circle Indicator

<!-- Circle Indicator -->
<div class="circle">
  <span class="circle-precentage" id="percentage">0%</span>
  <svg id="circle_svg" style="--circle-stroke: 252" class="circle-svg" height="160" width="160">
    <circle cx="80" cy="80" r="40" stroke="url(#gradient)" stroke-width="7.5" fill="transparent" />
    <linearGradient id="gradient">
      <stop offset="0%" style="stop-color: #eeaeca;stop-opacity:1" />
      <stop offset="100%" style="stop-color: #86A8E7;stop-opacity:1" />
    </linearGradient>
  </svg>
</div>

-> Hourglass Indicator

<!-- Houglass Indicator -->
<div class="hourglass" dd-rotate="false" id="hourglass_svg" style="--hg-stroke-1: 0%; --hg-stroke-2: 50%">
  <svg class="static" width="30" height="72" viewBox="0 0 10 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M3.34765 10.3501C0 9.59043 0 3.88923 5.16912e-06 0H9.99992C9.99992 3.82842 9.99992 9.41259 7.07295 10.3108C6.59338 10.458 6.15773 10.8064 6.09201 11.3038L6 12L6.09201 12.6962C6.15773 13.1936 6.59295 13.5425 7.07387 13.6851C10.0581 14.5705 9.99992 20.1658 9.99992 24H0V24C4.81657e-06 20.1108 1.19209e-05 14.4096 3.34765 13.6499C3.80156 13.5469 4.21219 13.2441 4.3171 12.7906L4.5 12L4.3171 11.2094C4.21219 10.7559 3.80156 10.4531 3.34765 10.3501Z" fill="#ccc"/>
  </svg>
</div>

Next, we will add some scrollable content to the container.

Content HTML

<div class="container">
.
.
Lorem ipsum
.
.

Next, we will apply the CSS style to all indicators. -> Topbar Indicator

/* Topbar Indicator */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  height: 5PX;
  background: #1a73e8;
  width: 0%;
}

-> Circle Indicator

/* Circle Indicator */
.circle {
  position: fixed;
  bottom: 50px;
  right: 100px;
}
.circle-precentage {
  position: absolute;
  font-family: 'Sora', sans-serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: #DB67FF;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.circle-svg {
  stroke-dasharray: 252;
  stroke-dashoffset: var(--circle-stroke);
}

-> Hourglass Indicator

/* Hourglass Indicator */
.hourglass {
  position: fixed;
  bottom: 100px;
  left: 100px;
  width: 30px;
  height: 72px;
  border-top: 10px solid #DB67FF;
  border-bottom: 10px solid #DB67FF;
  transition: all .5s;
}
.hourglass[dd-rotate="true"] {
  transform: rotate(180deg);
}
.hourglass .static {
  position: absolute;
  top: 0;
  left: 0;
}
.hourglass::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(0 var(--hg-stroke-1), 100% var(--hg-stroke-1), 100% var(--hg-stroke-2), 0 var(--hg-stroke-2));
  background-image: url("data:image/svg+xml,%3Csvg class='static' width='30' height='72' viewBox='0 0 10 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.34765 10.3501C0 9.59043 0 3.88923 5.16912e-06 0H9.99992C9.99992 3.82842 9.99992 9.41259 7.07295 10.3108C6.59338 10.458 6.15773 10.8064 6.09201 11.3038L6 12L6.09201 12.6962C6.15773 13.1936 6.59295 13.5425 7.07387 13.6851C10.0581 14.5705 9.99992 20.1658 9.99992 24H0V24C4.81657e-06 20.1108 1.19209e-05 14.4096 3.34765 13.6499C3.80156 13.5469 4.21219 13.2441 4.3171 12.7906L4.5 12L4.3171 11.2094C4.21219 10.7559 3.80156 10.4531 3.34765 10.3501Z' fill='%233B2D4A'/%3E%3C/svg%3E");
}

Next, we add the script that will animate all the indicators according to the percentage of the scroll.

let circle_stroke = 252;
let circle_stroke_percent = circle_stroke / 100;
let circle_svg = document.querySelector('#circle_svg');
function scrollProgress(event) {
  // Get scrolltop value
  let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  // scrollable content height
  let sc_height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  scroll_percentage = (scrollTop / sc_height) * 100;
  // Topbar
  topbar.style.width = scroll_percentage +'%';
  // Circle
  circle_svg.style.setProperty('--circle-stroke', (circle_stroke - Number(scroll_percentage * circle_stroke_percent)));
  // Hourglass
  hourglass_svg.style.setProperty('--hg-stroke-1', ( scroll_percentage / 2)+'%');
  hourglass_svg.style.setProperty('--hg-stroke-2', (50 + ( scroll_percentage / 2 ))+'%');
  // Circle percentage label
  percentage.innerHTML = scroll_percentage.toFixed(0)+'%';
  // Rotate the hourglass
  if( scroll_percentage >= 100) {
    hourglass_svg.attributes['dd-rotate'].value = true;
  }
  if( scroll_percentage == 0 ) {
    hourglass_svg.attributes['dd-rotate'].value = false;
  }
}
// Function on scroll
window.onscroll = scrollProgress;

Thanks for reading. I hope you guys found this snippet useful.