Why does my progress bar in React not begin on the left side and instead starting in the middle? (See image for reference)

Image

Having an issue with the scrolling progress bar that seems to be stuck in the middle and moving in both directions, which doesn't look visually appealing. Can anyone suggest how to resolve this? Interestingly, the same code works fine on online editors but not in my VSCode.

Here's the code snippet:

import React from 'react';

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

    componentDidMount() {
        window.addEventListener('scroll', this.scrollProgress);
    }

    componentWillUnmount() {
        window.removeEventListener('scroll', this.scrollProgress);
    }

    scrollProgress = () => {
        const scrollPx = document.body.scrollTop || document.documentElement.scrollTop;
        const winHeightPx = document.documentElement.scrollHeight - document.documentElement.clientHeight;
        const scrolled = `${(scrollPx / winHeightPx) * 100}%`;

        this.setState({
            scrolled: scrolled,
        });
    };

    render() {
        const progressContainerStyle = {
            background: 'transparent',
            height: '15px',
            position: 'fixed',
            top: 0,
            left: 0,
            width: '100vw',
            zIndex: 100,
        };

        const progressBarStyle = {
            height: '15px',
            backgroundImage: 'linear-gradient(-90deg, #6098df, #b581b0)',
            width: this.state.scrolled,
        };

        return (
            <div className="progress-container" style={progressContainerStyle}>
                <div className="progress-bar" style={progressBarStyle} />
            </div>
        );
    }
}

export default Progress;

Answer №1

By including the CSS property 'margin: 0' in both the progressContainerStyle and progressBarStyle, I was able to achieve a successful outcome!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

My CSS content seems to be fitting correctly, but it appears larger than anticipated. Where have I gone

I've been working on customizing my webpage for mobile phones, but I've encountered an issue. When I use the inspect tool in Chrome to make the "screen" smaller, the webpage itself appears smaller but the body element size remains unchanged, as i ...

Setting the z-index for a JavaScript plugin

I need help with embedding the LinkedIn plugin into a website that has stacked images using z-index for layout. I have tried assigning the plugin to a CSS class with a z-index and position properties, but it hasn't worked as expected. Can anyone sugge ...

AJAX request in jQuery version 1.4.4 and above will convert an empty array or object into a string

My JavaScript object is causing issues when trying to AJAX POST to a PHP script. While it used to work fine in jQuery 1.4.1, versions 1.4.4 and above now convert empty arrays or objects into strings like "0", which is not the desired behavior. JS: $(docu ...

What is the best way to clear a THREE.JS scene?

I am exploring methods to remove all objects from a scene without affecting the scene structure. I understand that naming each object individually allows for selective deletion by name. But, I am searching for a fast approach to clear a scene of all obje ...

Using jQuery to measure the height of a div consistently shows a value of 1

I'm attempting to retrieve the height of a specific div using the following code: var divHeight = $("#myDiv").height(); referencing information from the JQuery documentation <div style="width: 300px; height: 300px;"></div ...

Sending data from middleware to a function in Node.js is a crucial step in the communication

While working with express, I have a requirement to develop a middleware for validation purposes. The code snippet I have looks like this: Code: app.use('/upload', formData) app.use('/upload', function firstUpload(req, res, next) { ...

"Encountered a problem during the installation of pm2 for Node.js

I am in the process of installing pm2 (https://github.com/Unitech/pm2) Encountered the following error while doing so: D:\_Work>npm install pm2 -g --unsafe-perm npm WARN `git config --get remote.origin.url` returned wrong result (http://ikt.pm ...

Javascript scoping issue with a function that generates and returns other functions

I am facing an issue with my function where I keep getting 2 in the alert message every time. It seems like a variable scope problem, but I haven't been able to resolve it yet. var someObj = {"a" : 1, "b" : 2}; function retrieveData(obj){ var func ...

Issue with Material UI causing slow compilation in Next.js version 13

When trying to integrate Material UI with Next.js 13 (App router), I noticed that the compilation time during development is significantly slow. Is there a way to optimize this and decrease the compiling time? Experiencing slow compilation when using Mate ...

React - ensuring only one child component is "active" at a time

I have a main component that contains several child components. My goal is to apply an active class to a child component when it is clicked on. The current setup is functioning properly, however, the problem lies in the fact that multiple child components ...

Fetching the Key-Value pairs from a HashMap in JavaScript/AngularJS

I am currently working with a HashMap in the Frontend that is being retrieved from the Backend: var myVar = {"24":{"amount":2,"minutes":30},"32":{"amount":3,"minutes":30}} Can anyone offer guidance on how to access both the keys and values in Javascript ...

Issue: EPROTO 4455222784:error:1408F10B:SSL procedures:ssl3_acquire_content:incorrect version:../parts/openssl/openssl/ssl/record/ssl3_record.c:332:

I've configured a websocket server on the backend using the ws Node.js library. However, when attempting to connect from the client side, I encounter the following error message: events.js:377 throw er; // Unhandled 'error' event ...

Struggles with z-index in pseudo elements

I'm facing an issue with positioning my pseudo element behind its parent element. I want the red box to appear in front of the blue box. #mobile-nav-icon { position: absolute; display: block; height: 92px; width: 93px; background-color: r ...

What is the process for including parameters in a javascript/jquery function?

This unique script enables you to click on a specific element without any consequences, but as soon as you click anywhere else, it triggers a fade-out effect on something else. Within the following code snippet, you can interact with elements inside $(&apo ...

An easy CSS conundrum when hovering

Looking for some assistance with CSS. I want to display the text "Featured Page" with a picture appearing on the right side upon hovering (mouseover). Currently, the picture shows up under the text using the following CSS, but I need it to be larger and pl ...

How can you extract path information from an SVG file and utilize it as a marker on Google Maps?

I want to implement a custom SVG icon as a marker on Google Maps. I have obtained this SVG file: <svg xmlns="http://www.w3.org/2000/svg" width="510px" height="510px" viewBox="0 0 510 510"> <g stroke="black" stroke-width="10" ...

Ways to acquire the reference of the parent component

Within my code, there is a parent component represented as: <Parent> <Child (click)=doSomething()></Child> </Parent> I am looking to establish a reference to the Parent component in order to pass it within a method that will trigg ...

The HTML button navigates to an incorrect form

I have developed a program that includes a section for user comments and another section where logged-in users can input their own comments. When a logged-in user writes a comment, they will see a delete button next to it. Clicking on this button should t ...

AngularJS Treeview - Rearranging tree nodes

My journey with Angular is just beginning, and I managed to create a treeview following this example: jsfiddle.net/eu81273/8LWUc/18/ The data structure I've adopted looks like this: treeview1 = [ { roleName: "User ...

Incorporating information collected from a modal form into a table using vue.js

insert code hereThis single page application allows users to input data into a modal, which is then automatically added to a table on the main page. var modal = document.getElementById('modalAdd'); var modalBtn = document.getElementById(' ...