0

I wanted to show a full screen indeterminate progress bar on top of all screen elements. My use case is as follows:

User is presented with a form with among others, an email id field. The user enters the email id and via ajax that id is matched with a database. While this operation is in progress and the response via ajax controller is awaited, I want a full screen progress spinner to be visible on the entire area of the window and it must have text "Loading....". And while this is happening, all other controls must be disabled. I.e I wanted to set the image on top of all the controls.

Once the email is verified, I want to hide that image.

I have seen similar effect in many sites.(Not able to recall at this moment). So how do I do it?(setting the z-index does not work for me)

EDIT:

See this screenshot of odesk.com. This progress bar appears as you search for a job and check/uncheck a category in the left sidebar:

enter image description here

rahulserver
  • 10,411
  • 24
  • 90
  • 164
  • 1
    what is your acutal question? Do you don't know how to determinate the ajax action start and end or do you have trouble with the css part? You should show what you've tried so far. – Nico O Oct 19 '14 at 17:25
  • @NicoO indeterminate progress bar means something like a circle spinning until the task is done. – rahulserver Oct 19 '14 at 17:27
  • Tried `beforeSend` (start progress), `complete` (stop progress) `$.ajax()` options ? If possible , can post `html` , `js` ? Thanks – guest271314 Oct 19 '14 at 17:32
  • yes. But did you read my question? It's unclear where you are stuck. Do you need help with the Javascript or css? We will need to see some of your tries to help you. – Nico O Oct 19 '14 at 17:33
  • Read this: http://stackoverflow.com/a/1964871/3244925 – Nico O Oct 19 '14 at 17:36
  • @NicoO I have no clues as to how that works. Need some hints about it. – rahulserver Oct 19 '14 at 17:36

1 Answers1

0

Is it an ajax call in a function. ?If so add a gif and text just inside the function then when the ajax is complete it will output to the page, overwriting the gif. I had something like

function ajaxrequest() {
    var waitingimage="<img src='js/ajax-loader.gif'>";
    document.getElementById('ajax_results').innerHTML =waitingimage;

Then at the end overwrote it

if (xhr.status == 200 && xhr.status < 300) {        
document.    getElementById         ('ajax_results').innerHTML = xhr.responseText;
Billy
  • 2,448
  • 1
  • 10
  • 13