Custom Progress Bar

by Hemant Sharma

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Custom Progress Bar</title>
</head>
<body>
  <div class="container">
    <header>
      <h3>
        Custom Progress Bar
      </h3>
    </header>
    <div class="progressbar" id="id1">
      <ul>
        <li class="active">Step 1</li>
        <li class="active">Step 2</li>
        <li>Step 3</li>
        <li>Step 4</li>
      </ul>
    </div>
  </div>
</body>
</html>

SCSS

.container{
  width: 100%;
  header{
    text-align: center;
    color: green;
  }
  .progressbar{
    margin-top: 60px;
    position: relative;
    counter-reset: step;
    li{
      list-style: none;
      float: left;
      width: 25%;
      text-align: center;
      position: relative;
      &:before{
        content: counter(step);
        counter-increment: step;
        display: block;
        width: 30px;
        height: 30px;
        border: 1px solid #ddd;
        border-radius: 50%;
        line-height: 30px;
        margin: 0px auto 15px auto;
        background-color: white;
      }
      &:after{
        content: "";
        width: 100%;
        height: 2px;
        position: absolute;
        background-color: #ddd;
        top: 15px;
        z-index: -1;
        left: -50%;
      }
      &:first-child:after{
        content: none;
      }
      &.active{
        color: green;
      }
      &.active:before{
        border-color: green;
      }
      &.active + li:after{
        background-color: green;
      }
    }
  }
}

JavaScript

document.getElementsById("id1").addEventListener("click", dispAlert);

function(dispAlert){
	alert("test");
}