CODEWITHSUNDEEP
jqueryhtml
Rajesh
Rajesh

Reputation: 181

Jquery progressbar which shows % while PHP script getting execute

I'm new in jquery. I've two PHP scripts. first script accepts user input using form and when click on submit button then second script process user input by calling multiple API's.

Which take time to call API and get response. So i want to show progress bar with percentage till script getting process. So user knows that process is going on and wait till page get load.

Would anyone please help me to fix this. Thanks in advance.

Upvotes: 1

Views: 624

Answers (2)

Ramesh Kithsiri HettiArachchi
Ramesh Kithsiri HettiArachchi

Reputation: 1540

I don't think it is a good idea. Becoz jquery is slowing down your browser.

.progressbar{
width:100%;
height:4px;
background:blue;
}
.progressbar-loaded{
height:4px;
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progressbar"><div class="progressbar-loaded"></div></div>

<!-- your php codes going -->

end of my first php code<br>

<script type="text/JavaScript">
  $('.progressbar-loaded').css({width:'25%'});
</script>

<!-- your php codes going -->

end of my second php code<br>

<script type="text/JavaScript">
  $('.progressbar-loaded').css({width:'50%'});
</script>

<!-- your php codes going -->

end of my third php code<br>

<script type="text/JavaScript">
  $('.progressbar-loaded').css({width:'75%'});
</script>

<!-- your php codes going -->

end of my fourth php code<br>

<script type="text/JavaScript">
  $('.progressbar-loaded').css({width:'100%'});
</script>

this is the main process of progressbars

Upvotes: 1

Priya
Priya

Reputation: 1470

You can use loader or bootstrap progress bar https://www.w3schools.com/bootstrap/bootstrap_progressbars.asp

Upvotes: 0

Related Questions