Question

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

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

修改 enter image description here

修改我正在使用Bootstrap 3.1.1

修改亚历克斯，几乎在那里，只需要向前移动文本：

enter image description here

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 example

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％

即可

Answer 2

也许是线性渐变

Codepen Example

.approved {
  background-color: #bada55;
}

.approval_awaited {
background: linear-gradient(to right, #bada55 0%, #bada55 50%,rgba(255,255,255,1) 51%,rgba(255,255,255,1) 100%); /* W3C */
}

Answer 3

使用：在CSS语法之后，您可以执行以下操作：

http://jsfiddle.net/jY9fu/


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

这使用了你所拥有的相同HTML，只需要一点点CSS

编辑：将填充更新为偏离中心文本一点。见http://jsfiddle.net/jY9fu/1/

第二次编辑：在不添加额外元素的情况下，您可以使用以下内容属性：在诸如http://jsfiddle.net/jY9fu/2/之后的psuedo元素之后 - 但是如果它是动态的，则需要添加步骤的数据属性

Answer 4

我知道我的答案有点迟了......但我对JSfiddle的反应很慢。我的答案是使用不同的方法，因为您需要<span>来获取有关伪元素的数字。但背景渐变的答案是最好的imo。如果你可以使用它，我会这样做。

这是一个想法：

.progress
{
    margin:0;
    padding:0;
    list-style: none;
}

.progress > li
{
    margin: 0 10px 0px 0px;
    padding: 0;
    border-radius: 50px;
    padding: 5px 10px;
    line-height:1em;
    background-color: gray;
    color: #FFF;
    float: left;
    position: relative;
    overflow: hidden;
}

.progress > li:not(.half).done,
.progress > li.done:before
{
    background-color: green;
}

.progress > li:before
{
   bottom:0;
   top: 50%;
   left:0;
   right:0;
   content:"";
   position: absolute;   
}

.progress > li:last-of-type
{
    margin-right: 0
}

.progress > li > span
{
    position: relative;
}

使用此HTML：

<ul class="progress">
    <li class="done"><span>1</span></li>
    <li class="done"><span>2</span></li>
    <li class="half done"><span>3</span></li>
    <li class=""><span>4</span></li>
    <li class=""><span>5</span></li>
</ul>

小提琴：http://jsfiddle.net/NicoO/dq7pf/3/

Answer 5

我会说你的图标分成两个透明的部分，并根据批准状态改变每个部分的颜色。

或相互使用两个图标，一个是透明的并显示给用户，另一个是彩色的，它的不透明度为0，然后根据批准状态将其宽度设置为50％或100％。

颜色半个图标，使用CSS

5 个答案: