https://github.com/shahriyar-hosen/progress-bar-page-topside-animation

Create a dynamic Reading Progress Bar with HTML, CSS, and JavaScript to visually track reading progress on web pages.
https://github.com/shahriyar-hosen/progress-bar-page-topside-animation

css css3 html javascript js

Last synced: 4 days ago
JSON representation

Create a dynamic Reading Progress Bar with HTML, CSS, and JavaScript to visually track reading progress on web pages.

• Host: GitHub
• URL: https://github.com/shahriyar-hosen/progress-bar-page-topside-animation
• Owner: Shahriyar-Hosen
• Created: 2023-07-26T15:54:38.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-08-01T17:08:39.000Z (over 1 year ago)
• Last Synced: 2024-04-11T15:24:54.707Z (7 months ago)
• Topics: css, css3, html, javascript, js
• Language: HTML
• Homepage: https://progress-bar-page-topside-animation.vercel.app
• Size: 77.1 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
Reading Progress Bar Animation 
 with 
 HTML CSS JavaScript


### JavaScript

```js

// progressBar main div

const progressBar = document.querySelector("#progress-bar");

//Whichever div will work based

const mainBlogSection = document.querySelector("main");

const animateProgressBar = () => {

  let scrollDistance = -mainBlogSection.getBoundingClientRect().top;

  let progressWidth =

    (scrollDistance /

      (mainBlogSection.getBoundingClientRect().height -

        document.documentElement.clientHeight)) *

    100;

  let value = Math.floor(progressWidth);

  progressBar.style.width = value + "%";

  if (value < 0) {

    progressBar.style.width = "0%";

  }

};

window.addEventListener("scroll", animateProgressBar);

```



## Video Preview

[![Reading Progress Bar Animation with HTML CSS JavaScript](https://github.com/Shahriyar-Hosen/progress-bar-page-topside-animation/assets/96829173/58ab4ff0-185c-4a24-8818-c1d2d4fa7620)](https://github.com/Shahriyar-Hosen/progress-bar-page-topside-animation/assets/96829173/49e81bac-ff96-4fc4-a31e-d79d1e3d29f1)