Custom figure execution schedule
I am trying to implement a custom progress bar for a website. This is the form it should have:
When the user selects a circle, I want the row (and only the row, not circles) to fill with a different color until it reaches that circle, and finally a red dot should appear in the middle, having this as the end result if the user clicked on the third a circle:
I have no idea what a better, simpler approach to this might be. I've tried some pure CSS, jQuery and JavaScript solutions on the web, but no one can recreate this effect. Should I have two images and gradually overlay them until I only reach the click point? Should I completely forget the images and try to recreate the shape with CSS or SVG and change the color of a specific section?
I usually know there is code here, but I can't show it because I have no idea which approach to take and hours of research online have resulted in an endless number of solutions that are not relevant to my case.
Thanks in advance.
source to share
It's pretty easy with a mix of CSS and a bit of 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>
source to share
A simple method makes bg a black line and point in svg or png, then uses it as background repeat-x, then makes the red part the same as image and places it on top of bg with a new html element and also use background repeat-x. Then you can change the red element with css / js width to fill the progress bar.
source to share