Как создать загрузчик в Javascript, ожидающем окончания функции?

Question

У меня есть функция в Javascript (в браузере, а не node.js), что для фиксации требуется много времени. Я хочу, чтобы во время обработки функции браузер представлял загрузчик, поэтому пользователь может понять, что он/она должен ждать.

Answer 1

создать загрузчик первого:

<div class="loader" id="loader"> 
</div> 

Затем добавьте класс загрузчика в вашем CSS (CSS файл вашего класса загрузчика):

.loader { 
    border: 16px solid #f3f3f3; /* Light grey */ 
    border-top: 16px solid #3498db; /* Blue */ 
    border-radius: 50%; 
    width: 120px; 
    height: 120px; 
    animation: spin 2s linear infinite; 
} 

@keyframes spin { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
} 

.hide-loader{ 
display:none; 
} 

Добавить этот JS код в файл JS после вашего функция выполняется полностью, просто скройте загрузчик.

 $('#loader').addClass("hide-loader");