'Round arrow button surrounded with three break steps

I'm working on a multi step form and it needs to have an arrow button surrounded by three steps (that is the number of pages) and each step is colored once its completed. I can see the horizontal step forms everywhere but these round arrow button with steps with space in between them is something I'm unable to find or make.The type of button I'm trying to build Your help will be highly appreciated.

htmlcssreactjsmaterial-uistepper


Solution 1:[1]

react-circular-progressbar npm package has segmented circles and can take any JSX content as children (for your arrow icon). Following code is adapted from their codesandbox:

   <CircularProgressbarWithChildren
      value={66.6}
      strokeWidth={10}
      styles={buildStyles({
         strokeLinecap: "butt"
      })}
   >
      <img
         style={{ width: 40, marginTop: -5 }}
         src="https://i.imgur.com/b9NyUGm.png"
         alt="doge"
      />
      <RadialSeparators
         count={3}
         style={{
            background: "#fff",
            width: "2px",
            // This needs to be equal to props.strokeWidth
            height: `${10}%`
         }}
      />
   </CircularProgressbarWithChildren>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Adrian Schweizer

Related Questions