Round arrow button surrounded with three break steps

Question

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. Your help will be highly appreciated.

Answer 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>