How to change Step number with Loading Icon in ReactJS

Question

I am working on project in reactjs, Currently I am using Ant-design for Wizard form. I will share ant-design link. I want to change step number with loading icon when user click on next.. The current step number ( for example 1 ) is changed to loading and proceed to next step . I am beginner could you please help me ?

Ant-Design Link: Ant-design

Answer 1

This can be done by using steps custom icon property. The idea is you can pass the key in steps as given below:

const steps = [
  {
    title: "First",
    content: "First-content",
    key: 1
  },
  {
    title: "Second",
    content: "Second-content",
    key: 2
  },
  {
    title: "Last",
    content: "Last-content",
    key: 3
  }
];

And then you can use Icon of type loading in condition to check if current+1 === key as given below:

<Step
    key={item.title}
    title={item.title}
    icon={item.key !== 1 && item.key === current+1 ? <Icon type="loading" /> : ""}
/>

You can check the working demo.