1

I'm working with a step form that shows that increments 25% with each step crossed. I want to have four separators in between. How can I achieve that

 <Box
                position="relative"
                display="inline-flex"
                style={{ marginTop: "50px" }}
                onClick={anotherQuestion}
              >
                <CircularProgress
                  // className={classes.progressbar}
                  variant="determinate"
                  value={progress}
                  size={100}
                  sx={{
                    color: "#ffae00",
                  }}
                />
                <Box
                  top={12}
                  left={0}
                  // bottom={0}
                  right={0}
                  position="absolute"
                  display="flex"
                  alignItems="center"
                  justifyContent="center"
                >
                  <img
                    src={arrowImage}
                    className={classes.arrow}
                    alt="arrowImage"
                  />
                </Box>
              </Box>

Achieved

Expected

Salman Abbas
  • 41
  • 6
  • Do you want all of those four parts be shown? Or they will be there if the step is reached? For example if the process value is 50% just upper parts will show. – adel May 27 '22 at 12:17
  • @AdelArmand all four parts need to be shown with highlights parts that are done with yellow, current step with dark yellow and step yet to come with grey color – Salman Abbas May 28 '22 at 16:09

0 Answers0