A Pen by Hugo

Thumbnail
This awesome code was written by hugofovargue, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright hugofovargue ©
  • HTML
  • CSS
  • JavaScript
    <div class="progress">
  <div class="segment complete"></div>
  <div class="segment complete"></div>
  <div class="segment complete"></div>
  <div class="segment complete"></div>
  <div class="segment complete"></div>
  <div class="segment pass"></div>
  <div class="segment complete"></div>
  <div class="segment complete"></div>
  <div class="segment pass"></div>
  <div class="segment complete"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
<div>

/*Downloaded from https://www.codeseek.co/hugofovargue/a-pen-by-hugo-KqGVEP */
    .progress {
  display: flex;
  height: 25px;
  width: 33%;
  margin: 0 auto;
  margin-top: 25%;
/*   border: 1px solid blue; */
}

.segment {
  position: relative;
  border-radius: 1px;
  flex-grow: 1;
/*   max-width: 20px; */
  margin: 1px;
  border: 1px solid #4b6cb7;
}

.complete {
  background-color: #4b6cb7;
}

.pass {
  background-color: #E63946;
}


/*Downloaded from https://www.codeseek.co/hugofovargue/a-pen-by-hugo-KqGVEP */
    

Comments