Tell me, how beautifully (correctly) to organize the loading indicator on the page during the execution of asynchronous requests?
Now I thought of it like this: I take the GIF, the start of the download - we show the GIF in a modal way to the whole window. Loading and / or processing of the response is completed - we hide the gif.
But how good it is, beautiful, good - I do not know.

By the modal indicator for the whole window, I mean - a little gif that spins in the center of the window while everything else is dark.

  • one
    Modal indicator for the whole window? Are you laughing Start of loading - we show the indicator. Download and / or response processing is completed - we hide the indicator. - user207618
  • @Other I will update the data of the entire table, the tables - the entire window. And you need to either hang an indicator or a modal window on top of the container with the table) "Start of loading - show the indicator. Download and / or response processing is completed - hide the indicator." - that's exactly what I meant. - JVic
  • one
    Block the entire interface in rare cases. Keep the actions of users in the queue, distract them with cats / breasts_young_dea, but do not let them feel full of expectation. And so - the principle is simple and brilliant (see first comment). - user207618

1 answer 1

Yes, you are right reasoning. But instead of blocking in full screen, you can block the corresponding block (table).

function asyncRequest(callback) { // асинхронная опСрация, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ajax-запрос setTimeout(callback, 2000); } // событиС ΠΏΡ€ΠΈ ΠΊΠ»ΠΈΠΊΠ΅ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ $('.load').click(function() { var $preloader = $(this).parent().find('.modal__preloader'); $preloader.show(); // ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ ΠΏΡ€Π΅Π»ΠΎΠ°Π΄Π΅Ρ€ asyncRequest(function() { $preloader.hide(); // послС Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Π΄Π°Π½Π½Ρ‹Ρ…, скрываСм }); }); 
 .modal { background: #333; padding: 10px; width: 150px; height: 150px; position: relative; float: left; margin: 5px; } .modal__preloader { display: none; opacity: 0.8; position: absolute; left: 0; top: 0; z-index: 999; width: 100%; height: 100%; overflow: visible; background: #333 url('http://files.mimoymima.com/images/loading.gif') no-repeat center center; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="modal"> <button class="load">load</button> <div class="modal__preloader"></div> </div> <div class="modal"> <button class="load">load</button> <div class="modal__preloader"></div> </div>