Adding a graphic to Bootstrap progress bar

I'd like to make a custom Bootstrap progress-tracker like this:

with pure HTML/CSS. This is what I have so far

HTML:

<div class="progress progress-manager">   
    <div class="progress-bar progress-bar-done" role="progressbar" aria-valuenow="14" aria-valuemin="0" aria-valuemax="100" style: "width:14%">
        <div id="circle"></div>
    </div>
</div>

<br/> CSS:

#circle{
    color: blue;
    background-color: blue;
    width: 50px;
    height: 50px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
}

Which spits out the following (notice the circle doesn't extend past the progress bar):

Bootstrap doesn't have a :before pseudo element for its progress bar, so how might I achieve a result similar to the example?

The problem is that .progress class applies overflow: hidden so no child elements will ever be taller than the wrapper. And no elements outside of .progress can be positioned relative to the children.

One way to solve this would be to remove the overflow rule on the .progress wrapper like this:

<!-- language: lang-css -->

.progress {
    overflow: visible;
}

Then you have to manually apply the border radius to the .progress-bar since it is no longer confined by it's parent:

<!-- language: lang-css -->

.progress-bar {
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
}

Then you can add a circle at the end of the .progress-bar by adding an element with the :after pseudo class and adding a border radius equal to half of the element's width/height.

<!-- language: lang-css -->

.progress-bar:after {
    content:"";
    background-color: darkgreen;
    
    width: 30px;
    height: 30px;
    margin-right: -15px;
    margin-top: -5px;
    -webkit-border-radius: 15px; 
       -moz-border-radius: 15px; 
            border-radius: 15px;
    
    float: right;
}

Demo in fiddle

Which will look like this:

Warning: overflow:hidden was there for a reason. I'm not sure why, but this might have unintended consequences.