Create a Progress Stepper Element (Excellent for Kinds)

A progress stepper element is a software added in kinds 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 might be made up of the next parts:

• 4 round div parts 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 data 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 kinds to the physique to make sure the contents might 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 may have a container to carry all our parts:

1

.container {

2

    width: 700px;

3

    top: 300px;

4

  }

We may have one other container that makes use of Flexbox to make sure the circles representing the totally 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 parts 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 immediately under its corresponding circle. By default, all of the icons might be invisible.

1

  .circle span {

2

    place: absolute;

3

    high: 150%;

4

    left: 9%;

5

    coloration: #141d0d;

6

7

  }

8

9

  .circle i {

10

    place: absolute;

11

    high: 35%;

12

    left: 35%;

13

    show: none;

14

15

  }

By default, the primary circle may 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 may have the next kinds.

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 might be hidden. It will likely be displayed when a consumer finishes all of the steps required.

The horizontal bars (progress-bar and status-bar) might be positioned behind the circles. The primary bar (.progress-bar) might be inactive, whereas the second bar (.status-bar) size might 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

high: 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

high: 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  may have the next kinds and might be  hidden by default:

1

.message {

2

    width: 500px;

3

    top: 300px;

4

    border-radius: 5px;

5

    border: 2px strong;

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 presently 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 improve by 1, successfully shifting the progress indicator to the subsequent step..

1

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

2

  activeStepperIndex++;

3

  updateStepper();

4

});

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

Outline a operate known as updateStepper().

1

operate updateStepper() {

2

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

3

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

4

        if (index === activeStepperIndex) {

5

          previousBtn.type.backgroundColor = "gray";

6

          textI.type.show = "block";

7

          circle.classList.add("animate");

8

        }

9

        if (activeStepperIndex === 3) {

10

          nextBtn.type.show = "none";

11

          submitBtn.type.show = "block";

12

        }

13

      });

14

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

15

    }

Contained in the operate, we are going to use the built-in  forEach() technique to iterate via every circle 

• If the present index matches the activeStepperIndex, we are going to show the test icon to the corresponding circle and in addition animate the circle.
• If the activeStepperIndex is the final, we are going to disguise 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.type.width = percentageWidth + "%";

7

      StatusBar.type.backgroundColor = "inexperienced";

8

9

10

      updateStepper();

11

      previousBtn.disabled = true;

12

    });

The visible provides a inexperienced backgroundColor to point the progress made via the bar. The width is obtained by dividing the activeStepperIndex by the full 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 might 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.type.show = "block";

6

  container.type.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 now have realized how one can construct a stepper element with none further frameworks. Hopefully, now you can create much more superior stepper elements.