Progress bar appear when Search button is selected

Question

I have this form that searches for doctors based on what the user selects on the form.

So when user selects a city drop down box and click on searches, displays doctors in the city.

However, there is no indication to let the user know that the form is in progress in getting the results.

I would like that when the user clicks on the search button, on the right hand side of the form, where the results will be displayed, a progress bar will appear and leaving the content behind the background of the progress bar

I have the following form working somewhat well, with minor issues. The issue is has to do with when the user has entered a zip code and decides instead to search by city, it does erase the field but when I click on search, the results don't update.:

 <script> $(document).ready(function(){ $('#zip').on("input",function(){ $('#city option[value=""]').prop('selected',true); }) $('#city').on("change",function(){ $('#zip').val(""); }) }) </script> 

 <div class="panel panel-default"> <div class="panel-body"> <!--- <div id="loader" style="position: fixed; top:0; left:0; width:100%; height: 100%; background: url('loader.gif') center center #efefef"></div><!--Progress bar---> <form name="providerSearch" ng-submit="SearchProvider(searchParam);" novalidate="" role="form"> <div class="form-group"><input class="form-control" id="physiciansfirstname" ng-model="searchParam.FirstName" placeholder="First name:" type="text" /></div> <div class="form-group"><input class="form-control" id="physicianslastname" ng-model="searchParam.LastName" placeholder="Last name:" type="text" /></div> <div class="form-group"><select class="form-control" id="providerSpecialty" ng-model="searchParam.Specialty"><option disabled="disabled" selected="selected" value="">Specialty</option> <option value=""></option><option>Family practice</option><option>General practice</option><option>Internal medicine</option><option>Pediatrics</option> </select></div> <div class="form-group"> <SELECT name="proCity" class="form-control" id="city" placeholder="City" ng-model="searchParam.City"> <option disabled="disabled" selected="selected" value="">City</option> <option value=""></option> <cfoutput query="cityFind"> <option value=#city#>#city#</option> </cfoutput> </select> <!---<select class="form-control" id="city" ng-model="searchParam.City"><option disabled="disabled" selected="selected" value="">City</option><option ng-repeat="c in Cities">{{c.City}}</option> </select>----> </div> <div class="row"> <div class="col-xs-6 no-right-padding paddingLanguage"> <div class="form-group widthLanguage"> <select name="language" class="form-control" ng-model="searchParam.Language"> <option disabled="disabled" selected="selected" value="">Language</option> <option value=""></option> <cfoutput query="Languages"> <option value=#Language#>#Language#</option> </cfoutput> </select> <!---<select name="language" class="form-control widthLanguage" id="language" ng-model="searchParam.Language"> <option disabled="disabled" selected="selected" value="">Language</option> <option ng-repeat="l in Languages">{{l.Lang}}</option> </select>---> </div> </div> <div class="col-xs-6 no-left-padding"> <div class="form-group"><select class="form-control" name="gender" ng-model="searchParam.Gender"> <option disabled="disabled" selected="selected" value="">Gender</option> <option value=""></option> <option>Male</option><option>Female</option> </select></div> </div> </div> <hr class="hrDoctor" /> <div style="margin-top:-10px; margin-bottom:10px; text-align:center; font-size:8pt! important">* or Search by Zip code radius *</div> <div class="row"> <div class="col-xs-7 no-right-padding"> <div class="form-group"> <div class="input-group"><select class="form-control" name="distance" ng-model="searchParam.distance"><option selected="selected">5</option><option selected="selected">10</option><option selected="selected">15</option><option selected="selected">20</option> </select> <div class="input-group-addon">mi</div> </div> </div> </div> <div class="col-xs-5 no-left-padding widthZip"> <div class="form-group"><input allow-pattern="[\\d\\-]" class="form-control" id="zip" maxlength="5" ng-model="searchParam.Zip" placeholder="Zip code" type="text" /></div> </div> </div> <div class="form-group"><input class="btn btn-warning btn-block" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search" /></div> <!---<div class="form-group buttonWidth resetButton"><input class="btn btn-primary btn-block" type="reset" value="Reset" onClick="window.location.reload()"/></div>---> </form> <!---</div><!---Progress bar--->---> </div> </div> 

and I would like to do something like the following but using bootstrap:

 <div id="container" style="width:100%; height:5px; border:1px solid black;"> <div id="progress-bar" style="width:10%;background-color: green; height:5px;"></div> </div> <script> var width = 0; window.onload = function(e){ setInterval(function () { width = width >= 100 ? 0 : width+5; document.getElementById('progress-bar').style.width = width + '%'; }, 200); } </script> 

Any help would be appreciated.

Answer 1

Check whether below solution works for you,

 $(document).ready(function(){ $('#zip').on("input",function(){ $('#city option[value=""]').prop('selected',true); }); $('#city').on("change",function(){ $('#zip').val(""); }); $("#providerSearch").submit(function(e) { e.preventDefault(); var $progressbar = $('#progress-bar'); $progressbar.parent().removeClass("hidden"); var width = 0; setInterval(function () { width = width >= 100 ? 0 : width+5; $progressbar.css('width', width + '%'); }, 200); }); }); 

 .hidden { display : none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="panel panel-default"> <div class="panel-body"> <!--- <div id="loader" style="position: fixed; top:0; left:0; width:100%; height: 100%; background: url('loader.gif') center center #efefef"></div><!--Progress bar---> <form name="providerSearch" ng-submit="SearchProvider(searchParam);" novalidate="" role="form" id="providerSearch"> <div class="form-group"><input class="form-control" id="physiciansfirstname" ng-model="searchParam.FirstName" placeholder="First name:" type="text" /></div> <div class="form-group"><input class="form-control" id="physicianslastname" ng-model="searchParam.LastName" placeholder="Last name:" type="text" /></div> <div class="form-group"><select class="form-control" id="providerSpecialty" ng-model="searchParam.Specialty"><option disabled="disabled" selected="selected" value="">Specialty</option> <option value=""></option><option>Family practice</option><option>General practice</option><option>Internal medicine</option><option>Pediatrics</option> </select></div> <div class="form-group"> <SELECT name="proCity" class="form-control" id="city" placeholder="City" ng-model="searchParam.City"> <option disabled="disabled" selected="selected" value="">City</option> <option value=""></option> <cfoutput query="cityFind"> <option value=#city#>#city#</option> </cfoutput> </select> <!---<select class="form-control" id="city" ng-model="searchParam.City"><option disabled="disabled" selected="selected" value="">City</option><option ng-repeat="c in Cities">{{c.City}}</option> </select>----> </div> <div class="row"> <div class="col-xs-6 no-right-padding paddingLanguage"> <div class="form-group widthLanguage"> <select name="language" class="form-control" ng-model="searchParam.Language"> <option disabled="disabled" selected="selected" value="">Language</option> <option value=""></option> <cfoutput query="Languages"> <option value=#Language#>#Language#</option> </cfoutput> </select> <!---<select name="language" class="form-control widthLanguage" id="language" ng-model="searchParam.Language"> <option disabled="disabled" selected="selected" value="">Language</option> <option ng-repeat="l in Languages">{{l.Lang}}</option> </select>---> </div> </div> <div class="col-xs-6 no-left-padding"> <div class="form-group"><select class="form-control" name="gender" ng-model="searchParam.Gender"> <option disabled="disabled" selected="selected" value="">Gender</option> <option value=""></option> <option>Male</option><option>Female</option> </select></div> </div> </div> <hr class="hrDoctor" /> <div style="margin-top:-10px; margin-bottom:10px; text-align:center; font-size:8pt! important">* or Search by Zip code radius *</div> <div class="row"> <div class="col-xs-7 no-right-padding"> <div class="form-group"> <div class="input-group"><select class="form-control" name="distance" ng-model="searchParam.distance"><option selected="selected">5</option><option selected="selected">10</option><option selected="selected">15</option><option selected="selected">20</option> </select> <div class="input-group-addon">mi</div> </div> </div> </div> <div class="col-xs-5 no-left-padding widthZip"> <div class="form-group"><input allow-pattern="[\\d\\-]" class="form-control" id="zip" maxlength="5" ng-model="searchParam.Zip" placeholder="Zip code" type="text" /></div> </div> </div> <div class="form-group"><input class="btn btn-warning btn-block" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search" /></div> </form> </div> </div> <div id="container" style="width:100%; height:5px; border:1px solid black;" class="hidden"> <div id="progress-bar" style="width:10%;background-color: green; height:5px;"></div> </div>