KP-C

Kevin Powell - Community•17mo ago•

5 replies

smackalpha

How to make text color adapt to progressbar

I am making a custom progress bar. In the center of bar, text is center. As the progress fill, text color should be black on filled side and white on unfilled side. is that possible?
i have attached the figma image and my output image. I dont know how to make that text color change based on background. Can anyone help me

Codesandbox Link: https://codesandbox.io/p/sandbox/react-new?utm_source=dotnew

Code:
<Box
sx={{
position: "relative",
height: "31px",
width: "100%",
borderRadius: "20px",
outline: "2px solid white",
background: "#1E1D3E",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
{/* Progress Bar */}
<Box
sx={{
position: "absolute",
height: "31px",
width: "50%",
borderRadius: "20px",
background: "linear-gradient(90deg, #FFB818 0%, #FFCA51 100%)",
top: 0,
left: 0,
}}
/>
<Typography
sx={{ position: "relative", color: "white", fontWeight: "bold" }}
>
1/2 attempt remaining
</Typography>
</Box>