Я хочу показать загрузку страницы spinner в моем содержимом страницы html с помощью jquery mobile или jquery. I пробовал кодирование в jquery и ajax. его не работает ... есть ли какое-либо решение .. кто-нибудь может мне предложитьКак показать загрузку страницы spinner в моем содержимом страницы html с помощью jquery mobile или jquery
Это должно помочь вам в этом.
Все они в основном показывают одно и то же: (создание сайта с загруженным содержимым и индикатором загрузки 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
просто использовать GIF-изображение. Просто выполните поиск изображений Google «spinner gif». Затем сохраните spinner.gif на местном языке. Используйте "видимость", чтобы показать и скрыть ....
Процедура: - 1. Откройте Google.com
Нажмите на изображение Поиск
"Введите Spinner.gif" в поле поиска
Щелкните кнопку Поиск
его ы сделали теперь вы найдете много рисунка загрузки по вашему желанию (Любая .gif изображений подходят для вашего приложения) хранить его в местном использовании в HTML,
///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
любые предложения по как сделать полноэкранную версию Spinner? В настоящее время defanly jqm spinner появляется только внутри маленького прямоугольника в середине экрана. Это оставляет всю страницу уязвимой для кликов пользователем. Когда мой процесс загрузки продолжается. Я бы предпочел, чтобы счетчик отображался поверх полноэкранного наложения (например, всплывающее окно jqm), которое блокирует остальную часть содержимого. – dsdsdsdsd
@dsdsdsdsd Моя первая идея заключалась в том, чтобы просто распространять '.ui-loader', чтобы покрыть область просмотра, но это не работает, поскольку при каждом прокрутке оно получает верхнее значение, чтобы поддерживать его по центру по вертикали. На самом деле это очень сложно. Моя вторая идея заключалась в том, чтобы обернуть еще один элемент вокруг него и распространить его, чтобы охватить весь видовой экран, но это не работает так хорошо, потому что тогда вам придется контролировать видимость этого элемента отдельно от '.ui-loader'. Самый простой вариант - пойти с тем, что у вас получилось :) – Joonas