JQuery - Как показать spinner при загрузке контента в div?

Question

У меня есть панель навигации с некоторыми ссылками внутри нее. При нажатии любой ссылки он загружает содержимое с соответствующей страницы html в div, расположенном рядом с панелью навигации. Поскольку загрузка содержимого может занять пару секунд, я пытаюсь показать spinner, пока содержимое загружено. Вот пример кода, я попробовал:

$('.nav_link').click(function(e) { 
    $('.div_content').html(''); 

    var link = $(this); 
    setTimeout(function() { 
     $(".div_content").load(link.attr('ref')); 
    }, 1000); 

    $('.spinner').show(); // show Loading Div 

    setTimeout(function() { 
     $('.spinner').hide(); // hide loading div 
    },1500); 
}); 

Приведенный выше код показывает счетчик и он начинает вращаться, то он останавливается и застывает до загрузки контента. Затем счетчик исчезает, и содержимое отображается просто отлично. Вместо этого замораживания прядильщика мне нужно заставить его вращаться, пока контент не будет полностью загружен.

Here is a full code example in plnkr

Любые предложения?

Answer 1

Наконец-то я нашел интересное решение для моего вопроса. Использование GIF-изображения Spinner замерзнет при загрузке содержимого html в div, поэтому вместо этого я использовал созданный css spinner, который работал плавно без замораживания. Он может быть создан, как описано here.