I'm curious nobody asked this question yet:
I'm creating a progress bar as a react component. I want to fill this progress bar with a linear gradient. But I also want to display only the completed percentage of that background-color.
I didn't find how to resolve that. Here is my CSS code:
.ProgressBarContainer{
height: 24px;
width: 250px;
background-color: lightgray;
}
.ProgressBarGradient{
height: 24px;
width: 75%;
background-image: linear-gradient(to right, #a83e4c , #489668);
}
.ProgressBarFiller{
height: 24px;
width: 75%;
}
And here is the JS:
const ProgressBar = (props)=>{
return(
<div className={classes.ProgressBarContainer}>
<div className={classes.ProgressBarGradient}>
<div className={classes.ProgressBarFiller}></div>
</div>
</div>
)
}
Here is what is displayed at the moment
I want, in fact, to display only red as long as I'm under 20% width, And to display the green only if I approach the 100%..
Thanks to the comment, the solution is to use the 3rd div to hide part of the 2nd div.
.GradientHider{
height: 24px;
margin-left:50%;
background-color: lightgray;
}
And I realize that the first div was useless..
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.