css 圆的占比/进度

本次实例圆，也类比长方条占比/进度

代码块

<div class="circle">
    <i class="icon">11111111111</i>
</div>
<style type="text/css">
.circle {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    transform: rotate(0deg); //必须加上（否则不兼容），兼容搜狗，或者其它浏览器

    position:relative;
    overflow: hidden;

    background: #ddd;
    display: inline-block;

    box-sizing: border-box;
}

.icon {
    color: #fff;
    z-index:1000;
    position: relative;
    top: 10px;
}

div:after {
    content: '';
    height: 80%;
    width: 100%;

    position: absolute;

    bottom: 0;
    left: 0;
    background-color:blue;
}
</style>

效果（可以复制直接跑）：

你也可以试着实现这种，试下如果这个圆是个长条不就是进度、占比吗。

我自己项目实现是这种，111就是类比我的图标。