Custom progress bar

Question

I am trying to implement a custom progress bar on the site. In such a form that he should have:

When the user selects a Circle, I want the line (and only the line, not the circles) to fill in color until it reaches this circle, and finally the red dot should appear in the center of the third circle if the user clicked on the third circle:

I have no idea how best, easier to approach this.
I have already tried to do it on pure CSS , jQuery and javascript , but no one can recreate this effect. Should I use two images and gradually overlay them until I reach the selected point?
Should I not completely use images and try to recreate a form with CSS or SVG and change the color of a specific section?
I know that usually there should be code in questions, but I cannot show it, because I have no idea which approach to apply and the hours of research online with an infinite number of solutions did not help me, since they don’t fit my task.

Translation question: Custom shape progress bar @David Matos

I did not understand something ... you asked a question, and then at the end gave a link to the answer to it ... wat?
@Oleksandr this topic in the framework of the program association with the English-language site.
David Matos asked a question there. The answer will be issued later.
For some reason, an example answer does not work here ---- I check
I apologize, I understand you just do the localization of int.
Now the main thing is to understand why an example works for them, but we don’t have
association: stackoverflow.com/questions/27051337/custom-shape-progress-bar/…

Accepted Answer · 2017-02-13T10:57:37

Css option

 * { 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>

Community spirit ♦ one · Answer 2 · 2017-02-13T11:03:18

It's pretty simple using CSS and adding some jQuery.

 // 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>

Translation of the answer: Custom shape progress bar @Paul LeBeau

Custom progress bar

2 answers 2

More articles: