React Loading Bar Tutorial with Class-Based Components

This is an example of a simple React loading bar using class-based components. Copy the code below and try it out on your React project.

                
{`import React from 'react';

class LoadingBar extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            progress: 0,
        };
    }

    componentDidMount() {
        this.interval = setInterval(() => {
            if (this.state.progress < 100) {
                this.setState((prevState) => ({
                    progress: prevState.progress + 1,
                }));
            } else {
                clearInterval(this.interval);
            }
        }, 50);
    }

    componentWillUnmount() {
        clearInterval(this.interval);
    }

    render() {
        const { progress } = this.state;
        return (
            

                

                    

                
                
{progress}%
            
        );
    }
}

export default LoadingBar;`}