Custom percentage bars

by Mike Green

HTML

<h2>Problem</h2>
<p>
    The issue with the progress bar above is the radius of the corners. As the percentage approaches zero, the blue progress bar needs to become inset into its container while maintaining
    the same border radius. So it's not as simple as just reducing the width of the bar, the corners need to become partially hidden (like a horizontal sunrise).        
</p>    
<h2>Solution</h2>
<p>
    The solution was to keep the width of the progress bar constant and instead adjust its left positioning. Then, to retain the rounded corners of the container, a mask was overlayed on top
    to give the appearance that the blue progress bar was rounded on the left as well.
</p>
<div class="slider" title="4%">
    <div class="progress" data-percent="4"></div>
    <div class="mask"></div>
</div>
<div class="slider" title="35%">
    <div class="progress" data-percent="35"></div>
    <div class="mask"></div>
</div>
<div class="slider" title="75%">
    <div class="progress" data-percent="75"></div>
    <div class="mask"></div>
</div>
<div class="slider" title="90%">
    <div class="progress" data-percent="90"></div>
    <div class="mask"></div>
</div>

CSS

h2, p {font-family:Arial, Verdana, sans-serif;margin:0 0 10px}
h2 {font-size:15px;}
p {font-size:12px;}
div.slider {
    background:transparent url("https://lh6.googleusercontent.com/-C4bthXdHadE/TiiJSgtzh8I/AAAAAAAAANA/ecIrNa97HPc/s144/progress-bg.png") no-repeat 0 0 scroll;
    height:22px;
    margin-bottom:10px;
    overflow:hidden;
    position:relative;
    width:144px;
}

div.slider div.progress {
    background:transparent url("https://lh6.googleusercontent.com/-C4bthXdHadE/TiiJSgtzh8I/AAAAAAAAANA/ecIrNa97HPc/s144/progress-bg.png") no-repeat 0 -22px scroll;
    height:100%;
    left:-100%;
    position:relative;
    width:100%;
}

div.slider div.mask {
    background:transparent url("https://lh6.googleusercontent.com/-C4bthXdHadE/TiiJSgtzh8I/AAAAAAAAANA/ecIrNa97HPc/s144/progress-bg.png") no-repeat 0 -44px scroll;
    height:100%;
    left:0;
    position:absolute;
    top:0;
    width:100%;
    z-index:2;
}

JavaScript

$('div.slider div.progress').each(function() {
    var per = (100 - parseInt($(this).data('percent'))) * -1;
    $(this).animate({
        left: per + '%'
    }, 1200);
});