从我在当前代码中看到的内容来看，您不需要data-bind属性（尽管您可能有超出所示内容的原因）。**编辑：**对于Knockout.js，您当然需要data-bind属性。
您所需要做的就是为<progress>元素设置一个value，然后确保将其更新为as whatever process it represents is progressing。

<progress id="myProgress" value="10" max="100"></progress>

**编辑：**对于Knockout.js，您需要将data-bind属性绑定到ViewModel字段，并且该ViewModel字段需要与Observable相关联。

你可以这样做（一个玩具例子，每秒增加10的进度值，但是展示了你如何更新你的ViewModel，以及在达到一个阈值后触发一个类的改变）：

<div class="card-header float-right" style="width:50% ; padding-left:100px">
<progress
      id="myProgress"
      data-bind="value: progressValue, class: progressClass"
      max="100"
></progress>
</div>

<script>
      const INITIAL_PROGRESS = 1;
      const PROGRESS_THRESHOLD = 90;
      const BELOW_THRESHOLD_CLASS = "progress-below";
      const ABOVE_THRESHOLD_CLASS = "progress-100";

      let progressViewModel = {
        progressValue: ko.observable(INITIAL_PROGRESS),
        progressClass: ko.observable(BELOW_THRESHOLD_CLASS)
      };

      ko.applyBindings(
        progressViewModel,
        document.getElementById("myProgress")
      );

      ko.when(
        function() {
          return progressViewModel.progressValue() > PROGRESS_THRESHOLD;
        },
        function(result) {
          progressViewModel.progressClass(ABOVE_THRESHOLD_CLASS);
        }
      );

      for (let i = 1; i < 11; i++) {
        window.setTimeout(function() {
          progressViewModel.progressValue(i * 10);
        }, i * 1000);
      }

</script>

然后你必须弄清楚你希望如何更新你的可观察值。

如果你使用KnockoutJS，实际的进度可能是视图模型上的一个可观察属性。假设它实际上被称为progress，那么你应该像这样绑定它：

<div class="card-header float-right" style="width:50% ; padding-left:100px">
    <progress id="myProgress" data-bind="attr: { value: progress }" min="0" max="100"></progress>
</div>

对于样式，您应该使用css或class绑定，根据进度为进度条分配一个类。下面是一个Fiddle的小例子，尽管我使用了Bootstrap progress元素，而不是实际的原生progress元素，因为这对样式来说是一个噩梦：https://jsfiddle.net/thebluenile/20zsqn5w/