Spectre Steps

Last Updated : 21 Feb, 2022

Spectre Steps is used to design a progress bar consisting of, as you have seen in shopping platforms or any companies job portals. In the shopping platform, the shopping status is shown in the steps bars. And in job platforms, your interview steps are shown with the help of this component.

To create steps you need to add a container element with the step class. And add child elements with the step-item class. The step-item with the active class will be highlighted and indicate the current state of progress.

Spectre Steps class:

step: This class is used to create the steps container.
step-item: This class is used to create step items.

Syntax:

<ul class="step">
  <li class="step-item">
    <a href="#" class="tooltip">...</a>
  </li>
  <li class="step-item active">
    <a href="#" class="tooltip">...</a>
  </li>
    ...
</ul>

Below example illustrate the Spectre Steps:

Example: In this example, we will create steps that include 4 steps and make the 2nd step active by using the step class and the step-item will be green if the content is green.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>SPECTRE Steps Class</title>
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css/dist/spectre.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
</head>
 
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <strong>SPECTRE Steps Class</strong>
        <br><br>
        <ul class="step">
          <li class="step-item">
            <a href="#" class="tooltip text-success"
               data-tooltip="Scruting Resume">
              Resume Submitted
            </a>
          </li>
          <li class="step-item active">
            <a href="#" class="tooltip"
               data-tooltip="Test of Skills">
              Technical Round 1
            </a>
          </li>
          <li class="step-item">
            <a href="#" class="tooltip"
               data-tooltip="Test of Skills">
              Technical Round 2
            </a>
          </li>
          <li class="step-item">
            <a href="#" class="tooltip"
               data-tooltip="HR Discussion">
              Managerial Round
            </a>
          </li>
        </ul>
    </center>
</body>
 
</html>