Are you designing a website to manage requests and want to show their progress? Then you need a progress bar timeline. Therefore, the user can understand in which step he is located right now. The following code is a simple sample of a progress bar. The toggle button is also included to activate/deactivate a step.


HTML
<!-- This script got from www.devanswer.com -->
<link href='https://fonts.googleapis.com/css?family=Titillium+Web:400,200,300,600,700' rel='stylesheet' type='text/css'>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<button id="toggleButton">Toggle</button>
<ul class="timeline" id="timeline">
<li class="li complete">
<div class="timestamp">
<span class="author">User</span>
<span class="date">11/15/2019<span>
</div>
<div class="status">
<h4>Creation</h4>
</div>
</li>
<li class="li complete">
<div class="timestamp">
<span class="author">Junior Admin</span>
<span class="date">11/16/2019<span>
</div>
<div class="status">
<h4>Reviewing</h4>
</div>
</li>
<li class="li complete">
<div class="timestamp">
<span class="author">Junior Admin</span>
<span class="date">11/17/2014<span>
</div>
<div class="status">
<h4>First Approval</h4>
</div>
</li>
<li class="li">
<div class="timestamp">
<span class="author">Senior Admin</span>
<span class="date">11/18/2014<span>
</div>
<div class="status">
<h4>Final Approval</h4>
</div>
</li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
                        

CSS
.timeline {
  list-style-type: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.li {
  transition: all 200ms ease-in;
}

.timestamp {
  margin-bottom: 20px;
  padding: 0px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 100;
}

.status {
  padding: 0px 40px;
  display: flex;
  justify-content: center;
  border-top: 2px solid #D6DCE0;
  position: relative;
  transition: all 200ms ease-in;
}
.status h4 {
  font-weight: 600;
}
.status:before {
  content: "";
  width: 25px;
  height: 25px;
  background-color: white;
  border-radius: 25px;
  border: 1px solid #ddd;
  position: absolute;
  top: -15px;
  left: 42%;
  transition: all 200ms ease-in;
}

.li.complete .status {
  border-top: 2px solid #66DC71;
}
.li.complete .status:before {
  background-color: #66DC71;
  border: none;
  transition: all 200ms ease-in;
}
.li.complete .status h4 {
  color: #66DC71;
}

@media (min-device-width: 320px) and (max-device-width: 700px) {
  .timeline {
    list-style-type: none;
    display: block;
  }

  .li {
    transition: all 200ms ease-in;
    display: flex;
    width: inherit;
  }

  .timestamp {
    width: 100px;
  }

  .status:before {
    left: -8%;
    top: 30%;
    transition: all 200ms ease-in;
  }
}
html, body {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  font-family: "Titillium Web", sans serif;
  color: #758D96;
}

button {
  position: absolute;
  width: 100px;
  min-width: 100px;
  padding: 20px;
  margin: 20px;
  font-family: "Titillium Web", sans serif;
  border: none;
  color: white;
  font-size: 16px;
  text-align: center;
}

#toggleButton {
  margin: auto;
  align-content: center;
  background-color: #75C7F6;
  cursor: pointer;
}
Javascript
var completes = document.querySelectorAll(".complete");
var toggleButton = document.getElementById("toggleButton");

function toggleComplete() {
  var lastComplete = completes[completes.length - 1];
  lastComplete.classList.toggle('complete');
}

toggleButton.onclick = toggleComplete;