Click here to Skip to main content
15,868,016 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I try to show loader with percentage counter on page submit until it's redirect to home Page. but loader is not showing when I try to click on submit button. So How can I solve it?

JS code:

<pre>$(document).ready(function () {
    //alert("in function");
    $("#msform").on("submit", function () {
      alert("in submit function");

      $('#container1').show();

      let circularProgress = document.querySelector(".circular-progress"),
      progressValue = document.querySelector(".progress-value");

  let progressStartValue = 0,    
      progressEndValue = 100,    
      speed = 100;
      
  let progress = setInterval(() => {
      progressStartValue++;

      progressValue.textContent = `${progressStartValue}%`
      circularProgress.style.background = `conic-gradient(#7d2ae8 ${progressStartValue * 3.6}deg, #ededed 0deg)`

      if(progressStartValue == progressEndValue){
          clearInterval(progress);
      }    
  }, speed);

   });//submit
 });//document ready


  </script>


HTML CODE:(For circle loader)

<pre><div class="container1" id="container1" style="display:none;">
   <div class="circular-progress">
       0%
   </div>

 HTML & CSS
</div>


HTML Code : (for when I want to show loader on button click until page get back to the Homepage)


<pre> <form id="msform" class="needs-validation" novalidate method="POST" enctype="multipart/form-data">
<input type="submit" class="next action-button btn btn-primary" name="mainsubmit" value="Submit" id="nxtbtnwht1" />
 </form>


What I have tried:

I have tried this

<pre><pre>$(document).ready(function () {
    //alert("in function");
    $("#msform").on("submit", function () {
      alert("in submit function");

      $('#container1').show();

      let circularProgress = document.querySelector(".circular-progress"),
      progressValue = document.querySelector(".progress-value");

  let progressStartValue = 0,    
      progressEndValue = 100,    
      speed = 100;
      
  let progress = setInterval(() => {
      progressStartValue++;

      progressValue.textContent = `${progressStartValue}%`
      circularProgress.style.background = `conic-gradient(#7d2ae8 ${progressStartValue * 3.6}deg, #ededed 0deg)`

      if(progressStartValue == progressEndValue){
          clearInterval(progress);
      }    
  }, speed);

   });//submit
 });//document ready


  </script>
Posted
Comments
Dave Kreskowiak 8-Aug-22 9:30am    
You can't use a percentage unless you know exactly how much data you're going to get. Your client-side code doesn't know that value so the best you're going to get is a ring of patience. But even that's going to not do you any good because once the browser starts the navigation (redirect) to the next page, the code on the current page stops, including your ring of patience.
HellySoni 9-Aug-22 10:15am    
Thank you for your response.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900