How to make status bar look like certain online ordering status bars in HTML/CSS/JavaScript?


I have a status bar that looks like this

enter image description here

but I would like it to look like this

enter image description here

This code I am using for the current one is below. My question is this: would it be easier to do this using a non clickable formatted radio button, which I have seen with a similar look, or to use a totally different approach? I think I can figure out how to change the colors based on what the current status is, but I don’t know how to do the basic drawing of the shape.

.container {
  width: 800px;
  margin: 100px auto;

.progressbar {
  counter-reset: step;

.progressbar li {
  list-style-type: none;
  width: 16.6666%;
  float: left;
  font-size: 12px;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  color: #7d7d7d;

.progressbar li:before {
  width: 30px;
  height: 30px;
  content: counter(step);
  counter-increment: step;
  line-height: 30px;
  border: 2px solid #7d7d7d;
  display: block;
  text-align: center;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  background-color: white;

.progressbar li:after {
  width: 100%;
  height: 2px;
  content: "";
  position: absolute;
  background-color: #7d7d7d;
  top: 15px;
  left: -50%;
  z-index: -1;

.progressbar li:first-child:after {
  content: none;

.progressbar {
  color: green;

.progressbar {
  border-color: #55b776;

.progressbar + li:after {
  background-color: #55b776;
<div class="container">
  <ul class="progressbar">
    <li class="active">NOI Recieved</li>
    <li class="active">Request To Recieved</li>
    <li class="active">Recieved to Compelte</li>
    <li>Complete To Source</li>
    <li>Public Comment</li>
    <li>Branch Manager Issues</li>


You could accomplish the basic shapes using a container with a border radius and overflow hidden, and skewed pseudo elements for the segments. Here’s a quick proof-of-concept:

ul {
  list-style: none;
  display: inline-flex;
  border: 1px solid black;
  border-radius: 600px;
  overflow: hidden;

li {
  padding: 1em 2em;
  position: relative;

li::before {
  content: '';
  position: absolute;
  inset: 0;
  border-right: 1px solid black;
  transform: skew(-30deg);
  background: bisque;
  z-index: -1; /* behind the text */

li:first-child {
  /* extend the first item leftward to fill the rest of the space */
  margin-left: -4rem;
  padding-left: 4rem;

li:last-child {
  /* extend the last item rightward to fill the rest of the space */
  margin-right: -2rem;
  padding-right: 4rem;

.active::before {
  background: skyblue;
  <li class="active">Three</li>

Answered By – ray hatfield

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published