Question

我正在使用signalr为长时间运行的进程广播％complete，并使用jQuery更新进度条并显示x的项目计数x。进度条的面积值按预期更新，但我无法弄清楚如何使条形进度同时保持边框固定在100％宽度。

基本上，进度条边框和填充宽度一起增加，而不仅仅是填充。那有意义吗？我已经尝试将宽度值输入到跨度而不是div，但是当我这样做时，没有任何反应。此外，我的酒吧正朝着两个方向前进！

我在这里做错了什么？

    function progress(pctDone, imported, rowCount) {
        $('#progress-bar')
            .progressbar({value: pctDone})
            .text(imported + " of " + rowCount);
        $('#progress-bar').css('width', pctDone + '%');
    }

.progressbar {
  background-color: #86b5e1;
  height: 25px;
  padding: 5px;
  width: 250px;
  margin: 10px 0;
  border-radius: 5px;
  border:1px solid black;
}

.progressbar span {
  display: inline-block;
  height: 25px;
  border-radius: 3px;
}

<div class="progressbar" id="progress-bar" >
  <span style="width: 0%"></span>
</div>

Answer 1

我认为您忘记在$上添加('#progress-bar')。的jsfiddle： here

Answer 2

嗨，请检查一下这对您有用https://visualstudio.uservoice.com/forums/330519-team-services/suggestions/2037677-copy-and-paste-screenshots-into-work-items

如果您不想100％运行，只需更换功能

 function progress() {
           progressbar.progressbar("value", 50);
      }

所以你可以在里面指定你自己的价值

jQuery进度条没有正确填充

2 个答案: