Kendo UI Progress increment in Loop using javascript.
<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/progressbar/events">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.223/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.223/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.223/styles/kendo.material.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js"></script>
    <link rel="stylesheet" href="../content/shared/styles/examples-offline.css">
    <script src="../content/shared/js/console.js"></script>
</head>
<body>
<div id="example">
    <div class="demo-section k-content">
        <h4>ProgressBar</h4>
        StartNumber :  <input type="text" id="txtStartNumber"/><br/><br/>
        EndNumber    : <input type="text" id="txtEndNumber"/>
      
      
        <div id="progressBar"></div>
        <button id="startProgress" class="k-button k-primary">Start progress</button>
    </div>
    <div class="box">
        <h4>Console log</h4>
        <div class="console"></diav>
    </div>
    <script>
        $(document).ready(function () {
            
        $("#txtStartNumber").val(0);  
        $("#txtEndNumber").val(10);
          
          
          var maxNumber= parseInt($("#txtEndNumber").val());
          var startNumber = parseInt($("#txtStartNumber").val());
              
          console.log("MAX - "+maxNumber);
          
          $("#progressBar").kendoProgressBar({
                min: startNumber,
                max: maxNumber,
                type: "percent",
                change: onChange,
                complete: onComplete
            });
        });

        function onChange(e) {
            kendoConsole.log("Change event :: value is " + e.value);
        }

        function onComplete(e) {
            kendoConsole.log("Complete event :: value is " + e.value);

            $("#startProgress").text("Restart Progress").removeClass("k-state-disabled");
        }

        $("#startProgress").click(function () {
            if (!$(this).hasClass("k-state-disabled")) {
                $(this).addClass("k-state-disabled");
                zeeprogress();
            }
        });

        function zeeprogress() {
            var pb = $("#progressBar").data("kendoProgressBar");
          
            var maxNumber1= parseInt($("#txtEndNumber").val());
            var startNumber = parseInt($("#txtStartNumber").val());            
            pb.value(startNumber); //initialize with StartNumber         
         
          
          var totalrecords=100;
          
          for (var i = 0; i < 100; i++) {      


                  startNumber =  parseInt($("#txtStartNumber").val());                
                  endNumber = parseInt($("#txtEndNumber").val()); 

                  for (var j = startNumber; j <= endNumber; j++) {                
                      

                      //Progress Bar should show progress of j
                       pb.value(j);

                       i++
        
                  }    
}        
 
          
}
    </script>

    <style>
        #progressBar {
            display: block;
            width: 100%;
            margin-bottom: 10px;
        }
    </style> 
</div>

</body>
</html>
HOW TO USE KENDO PROGRESS BAR IN JAVASCRIPT ?

Docker Explained for Dummies and How Docker works?

Oauth2 Refresh Token Explained Using .NET Core 6

ASP.NET CORE 6 JWT Authentication
