How can I split a progress bar into more steps to achieve a design like this? https://i.stack.imgur.com/lRMj6.png
I attempted using this code but couldn't find an option for splitting:
<LinearProgress
variant="determinate"
classes={{ root: "progressBar", bar: "progressBar-bar" }}
value={(100 / stepsNumber) * stepNumber}
valueBuffer={40}
/>
Are there any additional options that I can add?
When discussing the concept of steps, I would suggest utilizing the Stepper component to implement this functionality.
Below is some code that provides a basic version of the component you are seeking:
// manage the step state
const [stepNumber, setStepNumber] = useState(1);
const stepsNumber = 6;
// generate an array with steps [0,1,2,...]
const steps = Array.from({ length: stepsNumber }, (_, i) => i);
// ...
<Stepper
activeStep={stepNumber}
connector={null}
style={{
display: "flex",
justifyContent: "center",
width: "100%",
maxWidth: 300,
}}
>
{steps.map((label) => (
<Step
key={label}
style={{
background: label < stepNumber ? "black" : "grey",
height: 12,
flex: 1,
borderRadius: 12,
}}
/>
))}
</Stepper>
I have created a codesandbox demo here
After spending hours on this, I am desperate for help. Everything was working perfectly until I updated the app store this morning and had to restart. Now my npm server (as part of learning React.js) is failing to work. Here is the error log: 0 info it wo ...
How come this piece of code executes successfully, querySelector("p + p"); while the following code snippet results in null? querySelector("p ~ p:first-of-type"); ...
I have been attempting to use the addClass function in JavaScript to add a class, but I am struggling to make it work. Is there a specific way to define a class that will be added to an element when clicked on? Here is what I have attempted: var input = ...
I am currently working on a project where I have a list of images that need to be hidden or shown based on the click event of specific <li> elements. While I have managed to achieve this functionality successfully, I am facing an issue with white spa ...
Every time I click on the Link parent, it triggers a click event on the button as well. I want these events to be independent. <Link className="product-item__link" to={`/products/${product.category}/${product.id}`} > <div className ...
Hey everyone! I'm facing an issue. I have to create a logout form on React js that redirects to loginindex.html from hello.ejs and clears some variables using server.js, but I'm not sure how to do it =( Can anyone offer some guidance? Thank you! ...
Hello everyone! My name is Mauro Cordeiro, and I come from Brazil. I am just diving into the world of coding and have been following various tutorials. Stack Overflow has been an invaluable resource for me in my learning journey! Aside from coding, I am a ...
As I delve into working with TypeScript, an unexpected error arises: Property 'splice' does not exist on type 'T'. type Item = { name: string, body: string, imgOne: string, imgTwo: string, }[] // Another file contains this func ...
After exploring various solutions to fix an issue, I've hit a roadblock. Adding CSS and jQuery code seemed promising at first, but upon refreshing the browser, a new problem emerged. The parent element retained its hover state background color, but th ...
Can't seem to get rid of the thin white line between a black image and a div with a black background on a page where the body background is set to white. I've tried setting border: 0 !important among other things, but it just won't go away. ...
I encountered an issue while trying to launch my React app using the command npm start. Initially, the app was integrated into a Firebase project and utilized Firebase Cloud Functions as its backend. However, it previously relied on a node server for the b ...
I currently have the following code: .viewport { width: 300px; } .container { --color-dark: rgb(40, 40, 40); --color-light: rgb(255, 255, 255); --color-base-background: rgb(255, 255, 255); ... <div class="viewport"> <di ...
Currently, I am trying to customize the select option box using HTML and CSS. My main goal is to incorporate a scroll feature into the option box. However, I have encountered an issue where the image of the checked box remains visible on the screen. Below ...
I am currently in the process of converting JavaScript to TypeScript and I've encountered the following error: Type '(props: PropsWithChildren) => (any[] | ((e: any) => void))[]' is not assignable to type 'FC'. Type '(a ...
After starting to use React with TypeScript, I defined my types as follows: type CardInfo = { cardIndex: null | number; title: string; note: string; _id: string; from: string; cardId: string; }; type ContentType = { title: string; note: st ...
I am attempting to make circles react to my jquery .hover function. Below is the JavaScript code I am using: jQuery.fn.center = function () { this.css("position","absolute"); this.css("top", Math.max(0, (($(window).height() - this.outerHeight()) / 2) + ...
Seeking a solution for my Progressive Web App that requires continuous updates of the user's location. Service workers lack access to the navigation.geolocation object, and my current workaround with a React Component halts when the browser is closed ...
I have a function in my react component for image classification that retrieves the image from the img tag using document.getElementById: const img = document.getElementById('animal_image');. The image uploaded via the file input updates the sta ...
In my Next JS application, I have a div that dynamically displays the currency and price of a product when a user visits a product page. <div className="flex"> <Image src={EuroCurrency} alt="Euro Sign} /> <h1 className=" ...
In my React application, I am utilizing 'react-image-pan-zoom-rotate' to display images. Visit the GitHub repository here The image I am displaying is sourced from an external service and passed to both libraries for rendering. Lately, I have ...