颜色半个图标,使用CSS

Question

我有一个进度条,代表邮件被批准的阶段.该消息可以部分批准,并需要第二次批准.因此,我需要代表以下内容,只有一半的图标为绿色.这可能吗？

<div class="stepwizard-step">
  <button type="button" class="btn btn-success btn-circle" disabled="disabled">1</button>
  <p>partially approved/approved</p>
</div>

编辑

编辑 我正在使用Bootstrap 3.1.1

编辑 亚历克斯,几乎在那里,只需要向前移动文本:

css是:

       .partially-approved {
            border-radius: 50%;
            background: #FFF;
            border: 1px solid #000;
            position: relative;
            overflow: hidden;
        }
        .partially-approved:before {
            background-color: #5cb85c;
            content: " ";
            position: absolute;
            left: 0;
            top: 0;
            right: 50%;
            height: 100%;
        }

这是适用的:

$('button#stage3').attr("class", "btn partially-approved btn-circle");

Answer 1

我在这里为你做了一个简单的例子:

JSFiddle示例

CSS:

#circle{
    width: 2em;
    height: 2em;
    border-radius: 1em;
    border: 1px solid black;
    overflow: hidden;
}
#progress{
    position: relative;
    width: 50%;
    height: 100%;
    background-color: green;
}

使用此功能,您还可以使用javascript编辑它,只需将进度宽度设置为100%即可