Displaying a dynamic progress bar across all elements in fullscreen mode

Question

Displaying a dynamic progress bar across all elements in fullscreen mode

I am looking to implement a full-screen indeterminate progress bar that overlays all screen elements. Here is my specific use case:

When a user fills out a form, including an email field, the email id is checked against a database via ajax. While waiting for the response from the server, I want a loading spinner with the text "Loading..." to cover the entire window area and disable all other controls. Essentially, I need this image to be displayed on top of all other elements.

Once the email verification process is complete, I would like the progress bar to disappear.

I have seen similar effects on various websites but cannot remember them currently. How can I achieve this without just setting the z-index?

EDIT:

Reference this screenshot from odesk.com where the progress bar displays when searching for a job or interacting with category checkboxes in the sidebar:

javascript jquery html css

Answer 1

Answer №1

When a function includes an ajax call, you can enhance it by incorporating a gif and text directly inside the function. Once the ajax call is completed, the output will replace the gif on the page. An example implementation:

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

The result will be showcased upon completion:

if (xhr.status == 200 && xhr.status < 300) {        
    document.getElementById('ajax_results').innerHTML = xhr.responseText;

Answer 2

When a function includes an ajax call, you can enhance it by incorporating a gif and text directly inside the function. Once the ajax call is completed, the output will replace the gif on the page. An example implementation:

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

The result will be showcased upon completion:

if (xhr.status == 200 && xhr.status < 300) {        
    document.getElementById('ajax_results').innerHTML = xhr.responseText;

Displaying a dynamic progress bar across all elements in fullscreen mode

Answer №1

Similar questions

Utilizing AngularJS to organize JSON data and display it in a table format

Transform Material UI Typography to css-in-js with styled-components

Utilizing Jquery within Reactjs

Using Object.defineProperty in a constructor has no effect

Connect a responsive div to a main div

Guide to customizing Highcharts for extracting targeted JSON information

Tips for making content vanish or remain concealed behind a see-through header during page scrolling

The text sliding feature gradually moves further away from the left side with each iteration

JQuery toggle class functionality experiencing glitches

Shader in THREE.js designed to accommodate ControlNet for normal calculations

Developing a personalized error message pop-up system in Electron

Is there a way to eliminate the # sign from hash data using jQuery?

Retrieve information from a SQL database table and present the output in an HTML table format

Irreparable Glitches in Mocha

Utilize JavaScript to extract and exhibit various SQL records stored within a multidimensional array

Is JQUERY always setting MVC bool EditorFor value to true?

What is the best way to utilize the handlebars-helpers library within an express.js application?

Utilizing .html() to convert JSON data into HTML content

The page does not seem to be reloading properly due to a redirect issue

What is the best way to assign a dynamic width to a block element?