how to stop initial jump of the attributes while using setinterval

Question

i am using set interval for displaying a dynamic data in progress but here my issue is on the initial start of the page it is kind of jumping the elements and then displaying the data .how can i stop that jump and here on initial my progress bar is also showing from middle not from the start

 var timerId = 0; $(document).ready(function() { loadData(); }); function loadData() { var data = { information: { "num": 73.00, "value": 75 } } var i = 0; var maxValue = data["information"]["value"]; timerId = setInterval(function() { data.information.value += 1; data.information.num += 0.01; let tri = data.information.num.toFixed(2); $('.animation').text(tri); $('.process').text(data.information.value); $('#blips > .progress-bar').css("width", data.information.value + "%"); i++; if (data.information.value == 100) { clearInterval(timerId); } }, 1000) } $('#stop').click(function() { clearInterval(timerId); }); 

 .text { position: absolute; z-index: 999; margin: 0 auto; left: 0; right: 0; text-align: center; top: 19%; font-family: Arial, sans-serif; color: black; width: 62%; } .nimation {} .progress-bar { background-color: brown !important; width: 244px; height: 44px; } #stop { position: relative; margin-left: 112px; left: 0px; margin-top: 46px; width: 288px; height: 80px; border-radius: 5px; background: brown; color: white; } .process { font-size: 36px; margin-left: 26%; } .para { font-size: 36px; color: black; margin-top: -5rem; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <div> <div class="text"> <p class="animation"> </p> <p class="para">Data</p> </div> <br> <br> <div class="progress" id="blips"> <div class="progress-bar" role="progressbar"> <span class="sr-only"></span> </div> </div> <p class="process"></p> <br> <button class="btn btn-primary" id="stop">Stop</button> </div> </div> 

Answer 1

Put the code that updates the DOM from the data object in a separate function that you call before starting the interval timer, so that you'll display the data with the initial values first.

 var timerId = 0; $(document).ready(function() { loadData(); }); function loadData() { var data = { information: { "num": 73.00, "value": 75 } } var i = 0; var maxValue = data["information"]["value"]; function displayProgress() { let tri = data.information.num.toFixed(2); $('.animation').text(tri); $('.process').text(data.information.value); $('#blips > .progress-bar').css("width", data.information.value + "%"); } displayProgress(); timerId = setInterval(function() { data.information.value += 1; data.information.num += 0.01; displayProgress(); i++; if (data.information.value == 100) { clearInterval(timerId); } }, 1000) } $('#stop').click(function() { clearInterval(timerId); }); 

 .text { position: absolute; z-index: 999; margin: 0 auto; left: 0; right: 0; text-align: center; top: 19%; font-family: Arial, sans-serif; color: black; width: 62%; } .nimation {} .progress-bar { background-color: brown !important; width: 244px; height: 44px; } #stop { position: relative; margin-left: 112px; left: 0px; margin-top: 46px; width: 288px; height: 80px; border-radius: 5px; background: brown; color: white; } .process { font-size: 36px; margin-left: 26%; } .para { font-size: 36px; color: black; margin-top: -5rem; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <div> <div class="text"> <p class="animation"> </p> <p class="para">Data</p> </div> <br> <br> <div class="progress" id="blips"> <div class="progress-bar" role="progressbar"> <span class="sr-only"></span> </div> </div> <p class="process"></p> <br> <button class="btn btn-primary" id="stop">Stop</button> </div> </div>