如何使用 jquery mobile 或 jquery 在我的 html 页面内容中显示页面加载微调器答案

【问题标题】：How to show page loading spinner in my html page content using jquery mobile or jquery如何使用 jquery mobile 或 jquery 在我的 html 页面内容中显示页面加载微调器
【发布时间】：2017-07-25 21:23:10
【问题描述】：

我想使用 jquery mobile 或 jquery 在我的 html 页面内容中显示页面加载微调器。我尝试了一些 jquery 和 ajax 编码。它不工作......有什么解决方案..任何人都可以建议我

【问题讨论】：

标签： jquery ajax spinner pageload

【解决方案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

【讨论】：

关于如何制作全屏微调器版本的任何建议？目前，默认的 jqm 微调器仅出现在屏幕中间的一个小矩形内。这使得整个页面容易受到用户点击的影响，而我的加载过程正在进行中。我希望微调器显示在阻止其余内容的全屏覆盖（如 jqm 'popup'）的顶部。
@dsdsdsdsd 我的第一个想法是传播.ui-loader 以覆盖视口，但这不起作用，因为每次滚动时都会给它一个最高值，以使其保持垂直居中。这实际上使事情变得非常困难。我的第二个想法是在它周围包裹另一个元素并将其传播以覆盖整个视口，但这并不能很好地工作，因为你必须与.ui-loader 分开控制该元素的可见性。最简单的选择是使用你所得到的:)

【解决方案2】：

只需使用 .gif 图像。只需做一个谷歌图片搜索“spinner gif”。然后将 spinner.gif 保存到您的本地。使用“可见性”来显示和隐藏....

程序：- 1. 打开 Google.com

点击图片搜索
在搜索框中“输入 Spinner.gif”
点击搜索按钮

现在你会发现很多 gif 图像根据需要下载（任何适合您应用的 .gif 图像）将其存储在您的本地以在html中使用，

【讨论】：

【解决方案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

【讨论】：