左右两个标签的进度条

progress bar that has two label on left and right

我想做一个这样的进度条

但我总是遇到对齐问题,这是我最近的输出。

我应该使用 .progress-label 但我不知道如何将它与进度条合并而不弄乱对齐。我还想要那个 "signals" 文本的模糊文本效果。

试试这个代码:

http://jsfiddle.net/hae95z1j/2/

           <p class="pull-left media-name">FACEBOOK</p>

        <div>
            <span class="progress-label">9 signals</span>
            <span class="pull-right">60%</span>

        <div class="progress">

            <div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:60%"></div>
        </div>

        </div>

在kendoUI.

中添加左右有标签的进度条
  • 左标签:- 不太可能
  • 右标签:- 可能

    $("#lesslikely").remove();

                var progressdata=$("#progressbar").data("kendoProgressBar");
                progressdata.progressStatus.text("<span style='float:right;'>Likely</span>");
    

    var wrapper=$(".k-progress-status-wrap").html();

            wrapper=wrapper+'<span id="lesslikely" style="float:left;margin-left:5px;">Less Likely</span>';
            wrapper=wrapper.replace(/&lt;/g,'<').replace(/&gt;/g,'>').replace(/&amp;/g,'&');
            $(".k-progress-status-wrap").html(wrapper);