Display a round percent indicator with CSS only

Question

Hi all !

I want to create a small round static percent indicator in CSS but I can't find the solution. The squared indicator at left is ok, but so ugly, I want it round !

I have tried with rounded corner (cf indicators at the right of the screenshot), and I wonder if there is possibility to add a rounded mask to hide the corners (cf. css3 mask: http://webkit.org/blog/181/css-masks/ ), but it seems like it's only for img...

The solution can works only on webkit browsers, because it's for a mobile webapp.

Here is my code to create the (ugly) indicator in the image above:

<div class="meter-wrap">
     <div class="meter-value" style="background-color: #489d41; width: 70%;">
            <div class="meter-text"> 70 % </div>
     </div>
</div>

And the css:

.meter-wrap{
    position: relative;
}
.meter-value {
 
 background-color: #489d41;
 
}
.meter-wrap, .meter-value, .meter-text {
    width: 30px; height: 30px;
/* Attempt to round the corner : (indicators at the right of the screenshot)
-webkit-border-radius : 15px;*/
}
.meter-wrap, .meter-value {
    background: #bdbdbd top left no-repeat;
}          
.meter-text {
    position: absolute;
    top:0; left:0;
    padding-top: 2px;         
    color: #000;
    text-align: center;
    width: 100%;
 font-size: 40%;
 text-shadow: #fffeff 1px 1px 0;
}

Answer 1

Add a wrapper around your .meter-value class, set its overflow to hidden and then set the width of that layer to get the desired effect. The rounded corners on the .meter-value class should remain intact and give you a nice fluid progress indicator.

You will have to move the .meter-text div outside of the wrapper to ensure it's visible throughout the transition, so your html would like something like:

<div class="meter-wrap">    
    <div class="meter-text"> 70 % </div>  
    <div class="meter-value-wrapper" style="width:70%;">
        <div class="meter-value" style="background-color: #489d41;">
    </div>
</div>

And the class for .meter-value-wrapper might look like:

.meter-value-wrapper { 
    overflow: hidden;
    width: 30px; 
    height: 30px;
}