title: Implement Arrow ProgressBar using CSS
body: <p><a href="https://i.stack.imgur.com/vSPZ3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vSPZ3.png" alt="enter image description here" /></a></p>
  <p>I need to implement this kind of progress bar using CSS/SCSS, HTML.</p>
  <p>The Progress Bar is almost done. The only problem is that Arrow position is not working properly. I can see that <code>:before</code> is a solution but now position is not correct.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;progress-panel&quot;&gt;
      &lt;div class=&quot;progress-panel--arrow -complete&quot;&gt;
        &lt;div class=&quot;progress-panel--arrow-content&quot;&gt;
          &lt;div class=&quot;progress-panel--arrow-icon&quot;&gt;
            &lt;svg width=&quot;24&quot; height=&quot;24&quot; viewBox=&quot;0 0 24 24&quot;&gt;
              &lt;path d=&quot;M12 .75C5.8.75.75 5.8.75 12S5.8 23.25 12 23.25 23.25 18.2 23.25 12 18.2.75 12 .75zM9.75 17.62L4.13 12l1.58-1.6 4.05 4.04L18.3 5.9l1.57 1.6L9.75 17.62z&quot; /&gt;
            &lt;/svg&gt;
          &lt;/div&gt;
          &lt;div class=&quot;progress-panel--arrow-text&quot;&gt;
            Ready
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;progress-panel--arrow -active&quot;&gt;
        &lt;div class=&quot;progress-panel--arrow-content&quot;&gt;
          &lt;div class=&quot;progress-panel--arrow-icon&quot;&gt;
            &lt;svg width=&quot;24&quot; height=&quot;24&quot; viewBox=&quot;0 0 24 24&quot;&gt;
              &lt;path d=&quot;M12 .83C5.84.83.83 5.83.83 12s5 11.17 11.17 11.17 11.17-5 11.17-11.17S18.17.83 12 .83zm0 20.1c-4.94 0-8.93-4-8.93-8.93s4-8.93 8.93-8.93 8.93 4 8.93 8.93-4 8.93-8.93 8.93z&quot;&gt;
              &lt;/path&gt;
            &lt;/svg&gt;
          &lt;/div&gt;
          &lt;div class=&quot;progress-panel--arrow-text&quot;&gt;
            Steady
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;progress-panel--arrow -incomplete&quot;&gt;
        &lt;div class=&quot;progress-panel--arrow-content&quot;&gt;
          &lt;div class=&quot;progress-panel--arrow-icon&quot;&gt;
            &lt;svg width=&quot;24&quot; height=&quot;24&quot; viewBox=&quot;0 0 24 24&quot;&gt;
              &lt;path d=&quot;M12 .83C5.84.83.83 5.83.83 12s5 11.17 11.17 11.17 11.17-5 11.17-11.17S18.17.83 12 .83zm0 20.1c-4.94 0-8.93-4-8.93-8.93s4-8.93 8.93-8.93 8.93 4 8.93 8.93-4 8.93-8.93 8.93z&quot;&gt;
              &lt;/path&gt;
            &lt;/svg&gt;
          &lt;/div&gt;
          &lt;div class=&quot;progress-panel--arrow-text&quot;&gt;
            Go
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;style &gt;
    .progress-panel--arrow-text {
      font-family: sans-serif;
      margin-left: 10px;
    }
    .progress-panel {
      display: flex;
      flex-direction: row;
    }
    .progress-panel--arrow-content {
      position: relative;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      width: 200px;
      height: 50px;
    }
    .progress-panel--arrow-content:before {
      content: '';
      width: 0;
      height: 0;
      border-left: 25px solid #333;
      border-top: 25px solid transparent;
      border-bottom: 25px solid transparent;
      top: 0;
      left: 100%;
    }
    .-complete {
      background-color: #00a5af;
    }
    .-active{
      background-color: #ffffff;
    }
    .-incomplete {
      background-color: #e8ebee;
    }
  &lt;/style&gt;
  </code></pre>