React Show Progress Bar on Page Scroll Tutorial Example

React on scroll progress bar tutorial; In this tutorial, we would like to share a pragmatic approach to build a progress bar that moves back and forth horizontally on window scroll or on page scroll in react application.

A software is built by adding various modules; seldom we need to create some features that come out of nowhere. I recently had a chance to create a progress bar in react that displays progress status on page scroll.

I decided to share my entire immaculate experience with you regarding building react on page scroll progress bar step by step.

Ideally, progress bars are used to display the progress of the ongoing task in computers or web and mobile applications. Basically, the progress bar enhances the user experience and inform the user about the ongoing progress of the certain task.

However, in this tutorial, we will deviate from the traditional approach and show the progress bar’s progress on page scroll.

And, yes, to develop this fascinating functionality, we will not use any third-party library. Isn’t that great? So, without further ado, let us start developing React page scroll progress indicator.

React On Page Scroll Progress Bar Example

  • Step 1: Install New React Project
  • Step 2: Set Default Scroll State
  • Step 3: Add Scroll Event Listener
  • Step 4: Create Progress Bar
  • Step 5: Style Progress Bar Component
  • Step 6: Ultimate Conjugated Code
  • Step 7: Run React Application

Install New React Project

In general, we assume you have already created the React app, which is ready to use. However, if you haven’t installed the app, then execute the following command to install a new react app.

npx create-react-app react-blog-app

Next, step into the app directory.

cd react-blog-app

Set Default Scroll State

In this segment, we will set the initial state of the progress bar component; essentially, a “state” is an object which describes the sections of the app which might mutate.

The entire code goes into src/App.js file:

import React from 'react';
import '../src/App.css';

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      scroll: 0
    };
  }

  render() {
    return (
        // ...
    );
  }
}

export default App;

Add Scroll Event Listener

Next, we have to define the event listeners. In general, these event listeners will invoke th onScrollProgress() method, which we will define in a while.

import React from 'react';
import '../src/App.css';

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      scroll: 0
    };
  }

  componentDidMount() {
    window.addEventListener("scroll", this.onScrollProgress);
  }

  componentWillUnmount() {
    window.removeEventListener("scroll", this.onScrollProgress);
  }

  render() {
    return (
        <div>
          {/* ... */}
        </div>
    );
  }
}

export default App;

Create Progress Bar

To get the progress bar value, we need to perform some calculations, which can be performed by calculating the scroll height, scroll top position, document client height, etc.

After measuring the accurate position, we conclude the progress bar position that we need to address in the setState method within the scroll property.

import React from 'react';
import '../src/App.css';

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      scroll: 0
    };
  }

  componentDidMount() {
    window.addEventListener("scroll", this.onScrollProgress);
  }

  componentWillUnmount() {
    window.removeEventListener("scroll", this.onScrollProgress);
  }

  onScrollProgress = () => {
    const scrollCal = document.documentElement.scrollTop;
    const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    const scrollValue = `${scrollCal / height * 100}%`;

    this.setState({
      scroll: scrollValue
    });
  };

  render() {
    return (
        <div>
          {/* ... */}
        </div>
    );
  }
}

export default App;

Style Progress Bar Component

In the next step, get inside the src/App.css file; here define some CSS to style the page scroll progress bar indicator component.

html,
body {
    margin: 0;
    padding: 0;
    display: flex;
    height: 10000px;    
    background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);
}

Ultimate Conjugated Code

So here we have the last code to be added, that is, to define the HTML structure of the progress bar; it goes into the return() method, whereas making sure to add the progress bar CSS code inside the render() method.

import React from 'react';
import '../src/App.css';

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      scroll: 0
    };
  }

  componentDidMount() {
    window.addEventListener("scroll", this.onScrollProgress);
  }

  componentWillUnmount() {
    window.removeEventListener("scroll", this.onScrollProgress);
  }

  onScrollProgress = () => {
    const scrollCal = document.documentElement.scrollTop;
    const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    const scrollValue = `${scrollCal / height * 100}%`;

    this.setState({
      scroll: scrollValue
    });
  };

  render() {
    const onScrollProgress = {
      top: 0,
      left: 0,
      zIndex: 102,
      width: "100%",      
      height: "35px",
      position: "fixed",
      background: "rgba(255, 255, 255, 0.12)"
    };

    const progressIndicator = {
      height: "35px",
      background: "#ffffff",
      width: this.state.scroll
    };

    return (
        <div className="progress-bar" style={onScrollProgress}>
          <div style={progressIndicator} />
        </div>
    );
  }
}

export default App;

Run React Application

Finally, we require to invoke the react application; you can open the terminal, type the command and execute the command to start the react app.

npm start

Eventually, you can use the recommended url to test app.

http://localhost:3000

React on Page Scroll Show Progress Bar

Conclusion

React page scroll progress indicator tutorial is finished; in this example, we have explained comprehensive instructions to create a page scroll progress bar in react app. We hope this guide will be helpful to you and make you react development voyage facile.