How do I position the progress bar around the element that has triggered the task?

Question

I am developing a dynamic website using jQuery which relies heavily on AJAX operations. Whenever an AJAX operation starts, a progress bar is shown which I have positioned in the middle of the web page.

I am finding it tiresome for a visitor switching their eyes from the element they have clicked to watch the progress bar which may be kilometers away from the element, then come back to the element or around it when the progress bar vanishes.

How should I position the progress bar around the element?

So far, I tried to register a handler called when the next AJAX request begins, as follows...

$(document).on('ajaxStart', ()=>{
  $('#parentOfBar').append("<div id=progressBarElem style='display:none;position:absolute;top:50%;left:50%;padding:2px;' ></div>");
  $('#progressBarElem').html('A moment, please wait...');
  $('#progressBarElem').progressbar({value: false});
  $('#progressBarElem').show();
});

When an AJAX operation begins, the progress bar appears at the center of the screen as I have specified using CSS. As I have stated, I would like it to appear next to the element that has triggered the AJAX operation (by say having been clicked).

I just figured out that instead of appending the div element (which becomes the progress bar once a child of some some fixed element), I could solve this by making it a sibling of the element which has the focus and removing its position CSS property as follows...

$(document).on('ajaxStart', ()=>{
    $fucusedElem = $( document.activeElement ) //the currently focused element
    $fucusedElem.parent().append("<div id=progressBarElem style='display:none;top:50%;left:50%;padding:2px;' ></div>");
    $('#progressBarElem').html('A moment, please wait...');
    $('#progressBarElem').progressbar({value: false});
    $('#progressBarElem').show();
});

The progress bar now appears next to the element causing it (the progress bar) to pop up. This is by adding the progress bar as a sibling of the element that has the focus. This way, when the progress bar does appear, it interferes with the layout of the nearby elements.

Is this the best solution or could there be a better way of telling which element caused an AJAX operation to start instead of relying on the element that has focus?

Answer 1

To position the progress bar around an element you need to use the click event function where you determine the functionality of what happens if an element if clicked then you simply set the position of the progress bar relative to the element that way clicked by doing the repositioning inside the click function by using the $(this) keyword to get the current element position.

Here is a code snippet which has progress bar repositioning.

  // Event listener for the click event on the example element
  $('#example-element').click(function(event) {
    // Show the progress bar
    $('#progress-bar').show();
    
    // Get the position of the clicked element
    var elementPos = $(this).offset();
    var elementWidth = $(this).outerWidth();
    var elementHeight = $(this).outerHeight();
    
    // Calculate the position for the progress bar
    var progressBarLeft = elementPos.left + (elementWidth / 2) - ($('#progress-bar').outerWidth() / 2);
    var progressBarTop = elementPos.top + (elementHeight / 2) - ($('#progress-bar').outerHeight() / 2);
    
    // Position the progress bar
    $('#progress-bar').css({
      left: progressBarLeft,
      top: progressBarTop
    });
  });

You can then position the progress bar back to the original place after the AJAX functionality has been completed.

Hope it helps...!