Пользовательский прогресс-бар

* { 
  padding: 0; 
  margin: 0; 
  box-sizing: border-box; 
} 
.b-someclass { 
  text-align: center; 
} 
.b-someclass-inner { 
  display: inline-block; 
  vertical-align: top; 
  position: relative; 
} 
.b-someclass-inner:before { 
  content: ''; 
  position: absolute; 
  top: 50%; 
  left: 15px; 
  width: calc(100% - 30px); 
  height: 6px; 
  background: #000; 
  margin-top: -3px; 
  z-index: 2; 
} 
.b-someclass-inner input { 
  display: none; 
} 
.b-someclass-inner input + label { 
  display: inline-block; 
  vertical-align: top; 
  margin: 15px; 
  width: 50px; 
  height: 50px; 
  background: #000; 
  border-radius: 50%; 
  position: relative; 
  z-index: 9; 
} 
.b-someclass-inner input + label:after { 
  content: ''; 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  height: 50%; 
  width: 50%; 
  margin: -25% 0 0 -25%; 
  border-radius: 50%; 
  background: tomato; 
  transform: scale(0); 
  transition: .25s; 
  transition-delay: .2s; 
} 
.b-someclass-inner input:checked + label:after { 
  background: tomato; 
  transform: scale(1); 
} 
.b-someclass-line { 
  position: absolute; 
  top: 50%; 
  margin-top: -3px; 
  left: 15px; 
  width: 0; 
  height: 6px; 
  background: tomato; 
  transition: .35s; 
  z-index: 2; 
  pointer-events: none; 
} 
.b-someclass-inner input:checked + label ~ .b-someclass-line { 
  left: 50px; 
} 
.b-someclass-inner #check-2:checked + label ~ .b-someclass-line { 
  width: calc(100% / 6); 
} 
.b-someclass-inner #check-3:checked + label ~ .b-someclass-line { 
  width: calc(100% / 6 * 2); 
} 
.b-someclass-inner #check-4:checked + label ~ .b-someclass-line { 
  width: calc(100% / 6 * 3); 
} 
.b-someclass-inner #check-5:checked + label ~ .b-someclass-line { 
  width: calc(100% / 6 * 4); 
} 
.b-someclass-inner #check-6:checked + label ~ .b-someclass-line { 
  width: calc(100% / 6 * 5); 
}

<div class="b-someclass"> 
<div class="b-someclass-inner"> 
    <input type="radio" name="check" id="check-1" checked> 
    <label for="check-1"></label>     
     
    <input type="radio" name="check" id="check-2"> 
    <label for="check-2"></label> 
     
    <input type="radio" name="check" id="check-3"> 
    <label for="check-3"></label> 
    
   <input type="radio" name="check" id="check-4"> 
    <label for="check-4"></label> 
     
    <input type="radio" name="check" id="check-5"> 
    <label for="check-5"></label> 
     
    <input type="radio" name="check" id="check-6"> 
    <label for="check-6"></label> 
     
    <div class="b-someclass-line"></div> 
</div>     
</div>

// Add click handler to the original dots 
$("UL.progress LI").click(function(e) { 
   // Deselect current selection 
   $("UL.progress LI.selected").removeClass("selected"); 
   var  newDot = $(this); 
   // Which dot are we selecting? 
   var  newProgressWidth = newDot.index(); 
   // Animate the new width of the red line 
   $("UL.progress LI.progressline").animate( 
       {'width': (newProgressWidth * 90) + 'px'}, 
       400, 
       function() { 
          // When done, select the new dot 
          newDot.addClass("selected"); 
       }); 
 
}); 
 
// Add the black and red bars as additional <li> elements 
// without click handlers 
$("<li>").addClass("blackbar").appendTo("UL.progress"); 
$("<li>").addClass("progressline").appendTo("UL.progress"); 
 
// Select the first dot 
$("UL.progress LI").first().addClass("selected");

UL.progress { 
    list-style: none; 
    padding: 0; 
    position: relative; 
} 
 
/* the black dots */ 
UL.progress LI { 
    float: left; 
    width: 60px; 
    height: 60px; 
    background-color: black; 
    border-radius: 50%; 
    margin-left: 30px; 
    position: relative; 
    cursor: pointer; 
} 
 
/* first black dot has no gap to the left */ 
UL.progress LI:first-child { 
    margin-left: 0; 
} 
 
/* red dot when selected */ 
UL.progress LI.selected:after { 
    content: ''; 
    display: block; 
    position: absolute; 
    top: 15px; 
    left: 15px; 
    width: 30px; 
    height: 30px; 
    background-color: red; 
    border-radius: 50%; 
} 
 
 
/* the black and red lines at the back*/ 
UL.progress LI.blackbar, 
UL.progress LI.progressline { 
    z-index: -2; 
    content: ''; 
    display: block; 
    position: absolute; 
    top: 28px; 
    left: 30px;    /* 60 (diameter) / 2 */ 
    width: 450px;  /* 5*60 + 5*30 (dot diameter and gap) */ 
    height: 4px; 
    background-color: black; 
    margin-left: 0; 
    border-radius: 0; 
} 
 
/* the black line */ 
UL.progress LI.blackbar { 
    z-index: -2; 
    background-color: black; 
} 
 
/* the red progress line */ 
UL.progress LI.progressline { 
    z-index: -1; 
    background-color: red; 
    width: 0; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Example progress bar<br/> 
 
<ul class="progress"> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
</ul>