Javascript CSS Incrementor

Now that I am back from holidays, I have started working on my Polymer Slide Deck functionality again.

I have come across the need to show how many "Steps" are on a slide, and I wanted to display this information as a fractional CSS circle around the slide counter.  A really interesting idea I thought. But how do you we go about it?

I know from experience that I can create a CSS Triangle using borders of a block element.

.sub-counter {
    position: absolute;
    display: block;
    width:0;
    border-top: 20px rgba(0,255,0,0.2) solid;
    border-left: 20px transparent solid;
    border-right: 20px transparent solid;
    border-bottom: 20px transparent solid;
}

So lets expand on this idea by adding a border radius

.sub-counter {
    position: absolute;
    display: block;
    width:0;
    border-top: 20px rgba(0,255,0,0.2) solid;
    border-left: 20px transparent solid;
    border-right: 20px transparent solid;
    border-bottom: 20px transparent solid;
    border-radius: 20px;
}

Now we have out basic Pie shape, I can use CSS to rotate my object.

.sub-counter {
    position: absolute;
    display: block;
    width:0;
    border-top: 20px rgba(0,255,0,0.2) solid;
    border-left: 20px transparent solid;
    border-right: 20px transparent solid;
    border-bottom: 20px transparent solid;
    border-radius: 20px;
}
.sub-counter.active {
    border-top: 20px rgba(0,255,0,1) solid;
}
.count-1 {
    transform: rotate(45deg);
    -webkit-transform:rotate(45deg);
}
.count-2 {
    transform: rotate(135deg);
    -webkit-transform:rotate(135deg);
}
.count-3 {
    transform: rotate(225deg);
    -webkit-transform:rotate(225deg);
}
.count-4 {
    transform: rotate(315deg);
    -webkit-transform:rotate(315deg);
}

from here, its an easy jQuery script to add an active class to highlight active steps. Check out the JSFiddle Example Below.

Main challenge with this method is that I can only do quarters easily. Other fractions will require some additional effort.

A step in the right direction though