3

I'm struggling to implement a custom progress bar for a website. This is the shape it's supposed to have:

Progress bar with nothing selected

When the user selects a circle, I want the line (and only the line, not the circles) to fill with a different color until it reaches that circle, and finally that red dot should appear in the middle, having this as a final result if the user clicked the third circle:

Progress bar with item 3 selected and path highlighted

I have no idea of what might be the best, simpler approach to this. I've tried some pure CSS, jQuery and JavaScript solutions online but none can recreate this effect. Should I have two images and progressively overlay them until I reach the clicked dot only? Should I forget images entirely and try to recreate the shape with CSS or an SVG and change the color of a certain section?

I know usually questions here have code, but I can't show any because I've no idea of what approach to take and hours of research online led to an infinite number of solutions that don't apply to my case.

Thanks in advance.

0

3 Answers 3

7

It is fairly simple with a mix of CSS and a little 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>    

1
  • 2
    That was incredible, that's exactly what I meant, thanks a lot! I'll put your name commented above the CSS and the jQuery. Commented Nov 21, 2014 at 15:06
1

I would create a red line directly above the black one. Then use jquery's animate to increase the width until it reaches the desired circle. Then once that is complete, do something similar to make the red circle (if you want it to expand, otherwise just drop it in there)

0

Simple method is making the bg of the black line and dot in svg or png then use it as background repeat-x then make the red part also as a image and put it on top of the bg with a new html element and also use background repeat-x. Then you can change the red element it's width with css/js to fill the progressbar.

Not the answer you're looking for? Browse other questions tagged or ask your own question.