Как показать спиннер при загрузке страницы в содержании моей html-страницы, используя jquery mobile или jquery

Question

Я хочу показать спиннер загрузки страницы в содержимом моей html-страницы, используя jquery mobile или jquery. Я попробовал написать код в jquery и ajax. это не работает ... есть ли решение .. кто-нибудь может предложить мне

Answer 1

Это должно помочь вам достичь этого.

Все они в основном показывают одно и то же ^{(создание веб-сайта с загруженным ajax-контентом и индикатором загрузки.)} с некоторыми отличиями.

http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/

http://tutorialzine.com/2009/09/simple-ajax-website-jquery/

http://www.queness.com/post/328/a-simple-ajax-driven-website-with-jqueryphp

Answer 2

просто используйте изображение .gif.Просто сделайте поиск изображений Google "Spinner GIF".Затем сохраните spinner.gif для локального.Используйте «видимость», чтобы показать и скрыть ....

Процедура: - 1. Откройте Google.com

1. Нажмите Поиск изображений

2. «Введите Spinner.gif» в поле поиска

3. Нажмите кнопку поиска

все готово, вы найдете много изображений GIFскачайте по своему желанию (любое изображение .gif, подходящее для вашего приложения). Храните его в местном формате, используя html,

Answer 3

///HTML CODE////
<div class="loader">
</div>
<button id="btn">
click 
</button>
<p>Processing - Please wait </p>

// CSS CODE ///
.loader {
  border: 16px solid yellow;
  border-radius: 50%;
  border-top: 16px solid #1BB2AC;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

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

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

/// JQUERY CODE ///
$('.loader').hide();
$('p').hide();
$('#btn').on('click', function(){
        setInterval(function(){
            $('.loader').hide();
     $('p').hide()
      $('#btn').hide();
        }, 2000)
    $('p').show();
        $('.loader').show();
    $('#btn').hide();
    });

https://jsfiddle.net/dxpkumar/4kgupxeL/#&togetherjs=8rscNma3nL