NeonMan,
набросок ... лучше к специлистам css
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
div{
counter-reset: num 2000;
display: flex;
width: 500px;
}
[name="line"]{
display: none;
}
label:before{
counter-increment: num ;
content: counter(num);
display: block;
width: 100px;
height: 4px;
background-color: rgba(255, 0, 255, 1);
line-height: 30px;
}
[name="line"]:checked ~ label:before{
background-color: rgba(240, 248, 255, 1);
}
label:nth-of-type(5):before{
width: 0px;
}
[name="line"]:checked + label:after{
margin-top: -6px;
content:'';
display: block;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: rgba(255, 0, 255, 1);
}
</style>
</head>
<body>
<div>
<input name="line" type="radio" id="line1" ><label for="line1"></label>
<input name="line" type="radio" id="line2" ><label for="line2"></label>
<input name="line" type="radio" id="line3" checked="checked" ><label for="line3"></label>
<input name="line" type="radio" id="line4" ><label for="line4"></label>
<input name="line" type="radio" id="line5" ><label for="line5"></label>
</div>
</body>
</html>
