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 开发者_Go百科:
.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;
}
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;
}
精彩评论