Create a Progress Stepper Component (Perfect for Forms)

A progress stepper element is a instrument added in varieties to streamline consumer interplay by breaking duties into manageable steps. It presents an easy navigation, visually tracks progress, and enhances the consumer expertise.

This tutorial will cowl constructing a progress stepper element with HTML, CSS, and JavaScript.

HTML Construction

The HTML construction can be made up of the next components:

• 4 round div components to signify the 4 steps within the navigation course of.
• Two horizontal bars.
• Earlier and Subsequent buttons to navigate between the steps.
• A message element to show any information messages.

1

    <div class="container">

2

      <div class="progress-container">

3

        <div class="progress-bar"></div>

4

        <div class="status-bar"></div>

5

6

        <div class="circle energetic">

7

          <span> Step 1</span>

8

          <i class="fa-solid fa-check"></i>

9

        </div>

10

        <div class="circle">

11

          <span> Step 2</span>

12

          <i class="fa-solid fa-check"></i>

13

        </div>

14

        <div class="circle">

15

          <span> Step 3</span>

16

          <i class="fa-solid fa-check"></i>

17

        </div>

18

        <div class="circle">

19

          <span> Step 4</span>

20

          <i class="fa-solid fa-check"></i>

21

        </div>

22

      </div>

23

      <div class="buttons">

24

        <button class="prev-btn">Earlier</button>

25

        <button class="next-btn">Subsequent</button>

26

        <button class="submit">Submit</button>

27

      </div>

28

    </div>

29

30

    <div class="message">

31

      <i class="fa-solid fa-check"></i>

32

      <p>Your particulars have been submitted</p>

33

    </div>

Styling with CSS

Let’s begin by making use of the next types to the physique to make sure the contents can be centered.

1

physique {

2

    min-height: 100vh;

3

    background-color: rgb(231, 233, 242);

4

    show: flex;

5

    justify-content: heart;

6

    align-items: heart;

7

    font-family: "Roboto", sans-serif;

8

  }

Then, we could have a container to carry all our components:

1

.container {

2

    width: 700px;

3

    top: 300px;

4

  }

We could have one other container that makes use of Flexbox to make sure the circles representing the completely different steps are spaced evenly alongside the horizontal axis.

1

.progress-container {

2

    width: 100%;

3

    show: flex;

4

    justify-content: space-between;

5

    margin: 50px auto;

6

    place: relative;

7

  }

Let’s make the div components representing the steps round by offering equal dimensions and a border-radius.

1

.circle  {

2

    width: 50px;

3

    top: 50px;

4

    background-color: white;

5

    border-radius: 50%;

6

    place: relative;

7

  }

We additionally want to make sure that the icons are positioned on the heart of the circles and the span is straight under its corresponding circle. By default, all of the icons can be invisible.

1

  .circle span {

2

    place: absolute;

3

    prime: 150%;

4

    left: 9%;

5

    coloration: #141d0d;

6

7

  }

8

9

  .circle i {

10

    place: absolute;

11

    prime: 35%;

12

    left: 35%;

13

    show: none;

14

15

  }

By default, the primary circle could have the icon seen and also will have a inexperienced background.

1

.circle.energetic i {

2

    show: block;

3

  }

4

5

  .energetic {

6

    show: block;

7

    background-color: #43880f;

8

  }

The buttons could have the next types.

1

.buttons {

2

  show: flex;

3

  justify-content: heart;

4

  align-items: heart;

5

  place: relative;

6

}

7

button {

8

  coloration: white;

9

  width: 100px;

10

  padding: 10px 20px;

11

  margin: 20px auto;

12

  border-radius: 3px;

13

  background-color: #43880f;

14

  border: none;

15

}

16

.subsequent {

17

  coloration: white;

18

  /* background-color: rgb(87, 87, 202); */

19

}

20

.submit {

21

  show: none;

22

}

23

button:disabled {

24

  cursor: not-allowed;

25

  background-color: grey;

26

}

By default, the submit button can be hidden. Will probably be displayed when a consumer finishes all of the steps required.

The horizontal bars (progress-bar and status-bar) can be positioned behind the circles. The primary bar (.progress-bar) can be inactive, whereas the second bar (.status-bar) size can be animated relying on the consumer’s progress.

1

.progress-bar {

2

width: 99%;

3

top: 5px;

4

background-color: gray;

5

place: absolute;

6

prime: 50%;

7

left: 0;

8

9

z-index: -1;

10

}

11

.status-bar {

12

width: 100%;

13

top: 5px;

14

background-color: clear;

15

place: absolute;

16

prime: 50%;

17

left: 0;

18

z-index: -1;

19

}

20

.animate {

21

animation: fill 0.5s ease-in-out 0.4s forwards;

22

}

23

24

@keyframes fill {

25

100% {

26

  box-shadow: inset 0px 0px 0px 30px #43880f;

27

}

28

}

Lastly the message element  could have the next types and can be  hidden by default:

1

.message {

2

    width: 500px;

3

    top: 300px;

4

    border-radius: 5px;

5

    border: 2px stable;

6

    hole: 10px;

7

    show: block;

8

    text-align: heart;

9

    padding: 100px 5px;

10

    show: none;

11

  }

12

13

  .message i {

14

    margin-bottom: 50px;

15

    font-size: 25px;

16

    padding: 20px 20px;

17

    background-color: rgb(230, 111, 196);

18

    border-radius: 50%;

19

    animation: fillIcon 0.8s ease alternate;

20

  }

21

        @keyframes fillIcon {

22

    0% {

23

      remodel: scale(1);

24

    }

25

    100% {

26

      remodel: scale(1.2);

27

    }

28

  }

JavaScript Performance

Time to get this factor working! The very first thing we have to do is get the weather:

1

const progressBar = doc.querySelectorAll(".progress-bar")[0];

2

const StatusBar = doc.querySelectorAll(".status-bar")[0];

3

4

const circles = doc.querySelectorAll(".circle");

5

const previousBtn = doc.querySelector(".prev-btn");

6

const nextBtn = doc.querySelector(".next-btn");

7

const submitBtn = doc.querySelector(".submit");

8

const message = doc.querySelector(".message");

Create a variable currentStepIndex to maintain monitor of the at the moment energetic step in our progress element.

1

let activeStepperIndex = 0;

Subsequent, add a click on occasion listener on the Subsequent button. When the button is clicked, the currentStepIndex will enhance by 1, successfully shifting the progress indicator to the following step..

1

nextBtn.addEventListener("click on", operate () {

2

  activeStepperIndex++;

3

  updateStepper();

4

});

The UpdateStepper() operate will show the examine icon relying on the brand new worth of the currentStepIndex.

Outline a operate referred to as updateStepper().

1

operate updateStepper() {

2

      circles.forEach((circle, index) => {

3

        const textI = circle.querySelector("i");

4

        if (index === activeStepperIndex) {

5

          previousBtn.model.backgroundColor = "gray";

6

          textI.model.show = "block";

7

          circle.classList.add("animate");

8

        }

9

        if (activeStepperIndex === 3) {

10

          nextBtn.model.show = "none";

11

          submitBtn.model.show = "block";

12

        }

13

      });

14

      // previousBtn.disabled = activeStepperIndex === 0;

15

    }

Contained in the operate, we are going to use the built-in  forEach() methodology to iterate by means of every circle 

• If the present index matches the activeStepperIndex, we are going to show the examine icon to the corresponding circle and in addition animate the circle.
• If the activeStepperIndex is the final, we are going to conceal the Subsequent button and show the submit button.

We additionally wish to present the visible illustration of the standing bar.  Replace the occasion listener for the Subsequent button, as proven under.

1

nextBtn.addEventListener("click on", operate () {

2

      activeStepperIndex++;

3

      console.log(activeStepperIndex);

4

      const percentageWidth =

5

        (activeStepperIndex / (circles.size - 1)) * 100;

6

      StatusBar.model.width = percentageWidth + "%";

7

      StatusBar.model.backgroundColor = "inexperienced";

8

9

10

      updateStepper();

11

      previousBtn.disabled = true;

12

    });

The visible provides a inexperienced backgroundColor to point the progress made by means of the bar. The width is obtained by dividing the activeStepperIndex by the entire variety of steps  (circles.size - 1 to regulate for zero-based indexing) and multiplying by 100 to get the worth in proportion.

For instance, if the step is at step 2, the width can be 33.3 %, and so forth.

Lastly, when the submit button is checked, we are going to show the message  element to the consumer letting them know that their particulars have been efficiently submitted.

Let’s add an occasion listener to the submit button . 

1

const message = doc.querySelector(".message");

2

const container = doc.querySelector(".container");

3

4

submitBtn.addEventListener("click on", operate () {

5

  message.model.show = "block";

6

  container.model.show = "none";

7

});

8

});

Contained in the operate, we’re making the message element seen whereas hiding the stepper element.

Conclusion

On this tutorial, we’ve realized tips on how to construct a stepper element with none extra frameworks. Hopefully, now you can create much more superior stepper parts.