A Pen by Trent Lutmer.

A-Pen-by-Trent-Lutmer.markdown

A Pen by Trent Lutmer

A Pen by Trent Lutmer on CodePen.

License.

index.html

<ol class="progtrckr" data-progtrckr-steps="5">
    <li class="progtrckr-done">1</li><!--
 --><li class="progtrckr-done">2</li><!--
 --><li class="progtrckr-done">3</li><!--
 --><li class="progtrckr-done">4</li><!--
 --><li class="progtrckr-todo">5</li>
</ol>

script.js

$(window).load(function(){
    $("ol.progtrckr").each(function(){
        $(this).attr("data-progtrckr-steps", 
                     $(this).children("li").length);
    });
})

style.css

ol.progtrckr {
    margin: 0;
    padding-left: 2em;
    list-style-type none;
  
}

ol.progtrckr li {
    display: block;
    text-align: center;
    line-height: 2em;
}

ol.progtrckr[data-progtrckr-steps="2"] li { width: 39%; }
ol.progtrckr[data-progtrckr-steps="3"] li { width: 23%; }
ol.progtrckr[data-progtrckr-steps="4"] li { width: 14%; }
ol.progtrckr[data-progtrckr-steps="5"] li { width: 9%; }
ol.progtrckr[data-progtrckr-steps="6"] li { width: 6%; }
ol.progtrckr[data-progtrckr-steps="7"] li { width: 4%; }
ol.progtrckr[data-progtrckr-steps="8"] li { width: 2%; }
ol.progtrckr[data-progtrckr-steps="9"] li { width: 1%; }

ol.progtrckr li.progtrckr-done {
    color: black;
    border-left: 4px solid yellowgreen;
}
ol.progtrckr li.progtrckr-todo {
    color: silver; 
    border-left: 4px solid silver;
}

ol.progtrckr li:after {
    content: "\00a0\00a0";
}
ol.progtrckr li:before {
    position: relative;
    bottom: -.5em;
    right: .65em;
    float: left;
    line-height: 1em;
}
ol.progtrckr li.progtrckr-done:before {
    content: "#";
    color: white;
    background-color: yellowgreen;
    height: 1.2em;
    width: 1.2em;
    line-height: 1.2em;
    border: none;
    border-radius: 1.2em;
}
ol.progtrckr li.progtrckr-todo:before {
    content: "5";
   background-color: silver;
    height: 1.2em;
    width: 1.2em;
    line-height: 1.2em;
    border: none;
    border-radius: 1.2em;
    color: white;
    bottom: -.6em;
    right: .7em;
}