[英]Display a round percent indicator with CSS only
Hi all !大家好 !
I want to create a small round static percent indicator in CSS but I can't find the solution.我想在 CSS 中创建一个小圆 static 百分比指标,但我找不到解决方案。 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...我试过圆角(参见屏幕截图右侧的指示器),我想知道是否可以添加一个圆角掩码来隐藏角(参见 css3 掩码: http://webkit.org/blog/181 /css-masks/ ),但它似乎只适用于 img ...
The solution can works only on webkit browsers, because it's for a mobile webapp.该解决方案只能在 webkit 浏览器上工作,因为它适用于移动 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:和 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;
}
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.在
.meter-value
class 周围添加一个包装器,将其overflow
设置为hidden
,然后设置该层的宽度以获得所需的效果。 The rounded corners on the .meter-value
class should remain intact and give you a nice fluid progress indicator. .meter-value
class 上的圆角应保持完整,并为您提供流畅的进度指示器。
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:您必须将
.meter-text
div 移到包装器之外,以确保它在整个转换过程中可见,因此您的 html 会喜欢以下内容:
<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
的 class 可能如下所示:
.meter-value-wrapper {
overflow: hidden;
width: 30px;
height: 30px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.