Добавление индикатора выполнения в ячейку HTML-таблицы в представлении Razor

Question

У меня есть таблица HTML, и я пытаюсь добавить индикатор выполнения: что-то вроде индикатора выполнения чанка здесь http://www.telerik.com/aspnet-mvc/progressbar Я получаю данные из хранимого процесса, хранящиеся в виде числа в настоящее время, нужно показать это как индикатор выполнения вместо этого.

Может кто-нибудь направить меня в правильном направлении. Я застрял на этой задаче в течение достаточно долгого времени. Вот мой код до сих пор.

Код:

<script>
    $(document).ready(function () {

        var pb = $("#profileCompleteness").kendoProgressBar({
            type: "chunk",
            chunkCount: 36,
            min: 0,
            max: 36,
            value: 4
        })
            $(function() {
            var pb = $("#profileCompleteness").data("kendoProgressBar");
            $(this).find(".progress").kendoProgressBar({value: item.percentage})

        });
    })
</script>

Внутри таблицы HTML:

@foreach (var item in Model)
        {
            <td align="center">
                    <div id="profileCompleteness"></div>

                 @Html.DisplayFor(modelItem => item.Percentage)
                 @Html.DisplayFor(modelItem => item.ProfileCompleteness)

                </td>
}

Я хочу получить эквивалентный процент вывода из базы данных, в настоящее время я жестко закодировал процентное значение до 4 выше. Я действительно ценю помощь заранее.

Спасибо

Answer 1

setInterval(function() {
  var randomWidth = 200*Math.random() + "px";
  document.getElementById("progress").style.width = randomWidth;}, 1000);

#progress-bar {
  width: 200px;
  height: 10px;
  background-color: black;
  position: absolute;
  
  top: 0px;
  left: 0px;
  z-index -1;
  }

#progress {
  width: 40px;
  height: 10px;
  background-color: red;
  position: absolute;
  top:0px;
  left:0px;
  z-index:7;
 }

<div>
  <div id="progress-bar"> </div>
  <div id="progress"> </div>
</div>