Drawing A Tick Mark In The Progressbar If The Process Is Done

I was created a simple progressbar with CSS & HTML. Here I used three classes active, inactive & done. If the class is active it will show the circle with background-colo

Solution 1:

Use tick mark in content: "✓";

.container {
      width: 600px;
      margin: 100px auto; 
  }
  .progressbarli {
      list-style-type: none;
      width: 25%;
      float: left;
      font-size: 12px;
      position: relative;
      text-align: center;
      color: #7d7d7d;
  }
  .progressbarli:before {
      width: 30px;
      height: 30px;
      content: "";
      line-height: 30px;
      border: 2px solid #7d7d7d;
      display: block;
      text-align: center;
      margin: 0 auto 10px auto;
      border-radius: 50%;
      background-color: white;
  }
  .progressbarli.done:before {
      content: "✓";
      color: #ffffff;
      font-size: 20px;
  }
  .progressbarli:after {
      width: 100%;
      height: 2px;
      content: '';
      position: absolute;
      background-color: #7d7d7d;
      top: 15px;
      left: -50%;
      z-index: -1;
  }
  .progressbarli:first-child:after {
      content: none;
  }
  .progressbarli.active {
      color: green;
  }
  .progressbarli.active:before {
      border-color: #55b776;
      background-color: #55b776;
  }
  .progressbarli.active + li:after {
      background-color: #55b776;
  }
  .progressbarli.done:before {
      border-color: #55b776;
      background-color: #55b776;
  }
  .progressbarli.done + li:after {
      background-color: #55b776;
  }
  .progressbarli.inactive:before {
      border-color: #7d7d7d;
      background-color: #7d7d7d;
  }
  .progressbarli.inactive + li:after {
      background-color: #7d7d7d;
  }

<divclass="container"><ulclass="progressbar"><liclass="done"></li><liclass="active"></li><liclass="inactive"></li></ul></div>

As per your Requirements using css

.container {
      width: 600px;
      margin: 100px auto; 
  }
  .progressbarli {
      list-style-type: none;
      width: 25%;
      float: left;
      font-size: 12px;
      position: relative;
      text-align: center;
      color: #7d7d7d;
  }
  .progressbarli:before {
      width: 30px;
      height: 30px;
      content: "";
      line-height: 30px;
      border: 2px solid #7d7d7d;
      display: block;
      text-align: center;
      margin: 0 auto 10px auto;
      border-radius: 50%;
      background-color: white;
  }
  .progressbarli:after {
      width: 100%;
      height: 2px;
      content: '';
      position: absolute;
      background-color: #7d7d7d;
      top: 15px;
      left: -50%;
      z-index: -1;
  }
  .progressbarli:first-child:after {
      content: none;
  }
  .progressbarli.active {
      color: green;
  }
  .progressbarli.active:before {
      border-color: #55b776;
      background-color: #55b776;
  }
  .progressbarli.active + li:after {
      background-color: #55b776;
  }
  .progressbarli.done:before {
      border-color: #55b776;
      background-color: #55b776;
  }
  .progressbarli.done + li:after {
      background-color: #55b776;
  }
  .progressbarli.inactive:before {
      border-color: #7d7d7d;
      background-color: #7d7d7d;
  }
  .progressbarli.inactive + li:after {
      background-color: #7d7d7d;
  }
  
  .progressbarli.done {
    font-size: 16px;
    position: relative;
  }

  .progressbarli.done:after {
    content: " ";
    display: block;
    width: 0.3em;
    height: 0.6em;
    border: solid white;
    border-width: 00.2em0.2em0;
    position: absolute;
    left: 4.2em;
    top: 26%;
    margin-top: -0.2em;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    z-index:9;
    background-color: #55b776;
  }

<divclass="container"><ulclass="progressbar"><liclass="done"></li><liclass="active"></li><liclass="inactive"></li></ul></div>

Solution 2:

You only need to set the content to the tick mark when the done class is applied.

.progressbarli.done:before {
    content: "✔";
}

Wirking fiddle: https://jsfiddle.net/ordmpf59/