How to create a progress bar with line and checkpoint with uneven column width?

user_4971859 0
Viewed 46

.cma--steps {
  margin: 10px auto;
  position: relative;
  max-width: 500px;
}

.cma--step-dot {
  display: inline-block;
  width: 15px;
  border-radius: 50%;
  height: 15px;
  background: blue;
  border: 5px solid #e8e8e8;
  position: relative;
  top: -8px;  
}

.cma--step-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: red;  
}
<div class="cma--steps">
  <div class="cma--step-bar">
  </div>
  <div class="row">
    <div class="col-8">
      <div><span class="cma--step-dot"></span><span class="cma--step-title">A</span></div>
    </div>
    <div class="col-2">
      <div><span class="cma--step-dot"></span><span class="cma--step-title">B</span></div>
    </div>
    <div class="col-2">
      <div><span class="cma--step-dot"></span><span class="cma--step-title">C</span></div>
    </div>
  </div>  
</div>

The output is below:

enter image description here

How do I remove or hide the red color line from C onward to become below?

enter image description here

The outcome that I need is below, to have space/margin between the dots.

enter image description here

css html
1 Answers

Of Red Line

.cma--save-bar{
   width: 95%;
 }

give it a property of width

Of Space Btw Dots

.cma--step-dot{
  margin: 0px 10px 0px 10px;
 }

add a property of adding margin from left and right

Hope It Helps You

user_167482530
Related