Scroll Progress Indicators

Scroll progress indicators like Top Progress Bar, Circle Scroll Progress, and Hourglass Scroll Progress using HTML, CSS and Javascript

 Yogesh    16 Dec, 2020    45


 Demo  Download

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.


Credits / Resources

  • Google Fonts(Epilougs, Sora) => https://fonts.google.com/specimen/Sora?selection.family=Epilogue:ital,wght@0,300;1,100;1,200|Sora:wght@700&sidebar.open=true



Related Snippets