Adding a Progress bar in a html table cell in a Razor view

Question

I have a HTML table and I am trying to add a progress bar: something like a chunk progress bar here http://www.telerik.com/aspnet-mvc/progressbar I am getting data from the stored proc stored as a number currently, need to show it as a progress bar instead.

Can someone point me in the right direction. I have been stuck on this task for quite some time. Here's my code so far.

Code:

<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>

Inside the HTML table:

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

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

                </td>
}

I want to get the output percentage equivalent from the database, currently I have hard coded the percentage value to 4 above. I really appreciate the help in advance.

Thanks

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>