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

我想使用jquery mobile或jquery在html页面内容中显示页面加载微调器。它不起作用……有什么解决办法吗……有人能建议我吗？

这些应该能帮助你实现这一目标

所有这些基本上都显示了相同的内容（使用ajax加载内容和加载指示器创建网站），但有一些不同

---

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

程序：- 1.打开Google.com

单击图像搜索

在搜索框中输入Spinner.gif

单击“搜索”按钮

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

///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();
    });

点击
正在处理-请稍候

//CSS代码///
.加载器{
边框：16px实心黄色；
边界半径：50%；
边框顶部：16px实心#1BB2AC；
宽度：120px；
高度：120px；
-webkit动画：旋转2s线性无限；
动画：旋转2s线性无限；
}
@-webkit关键帧旋转{
0%{-webkit变换：旋转（0度）；}
100%{-webkit变换：旋转（360度）；}
}
@关键帧旋转{
0%{变换：旋转（0度）；}
100%{变换：旋转（360度）；}
}
///JQUERY代码///
$（'.loader'）.hide（）；
$（'p'）.hide（）；
$（'#btn'）。在（'click'，function（）上{
setInterval（函数（）{
$（'.loader'）.hide（）；
$（'p'）.hide（）
$（'#btn'）.hide（）；
}, 2000)
$（'p'）.show（）；
$（'.loader'）.show（）；
$（'#btn'）.hide（）；
});

---

关于如何制作全屏微调器版本有什么建议吗？目前，DEFAULY JQM旋转器只出现在屏幕中部的一个小矩形中。这使得整个页面在加载过程中容易被用户点击。我希望微调器显示在全屏覆盖（如jqm“弹出窗口”）的顶部，以阻止其余内容。@dsd我的第一个想法是将

.ui loader

展开以覆盖视口，但这不起作用，因为每次滚动时都会给它一个顶部值，使其垂直居中。这实际上使事情变得非常困难。我的第二个想法是将另一个元素包裹在它周围，并将其展开以覆盖整个视口，但效果不太好，因为这样您就必须与

.ui加载程序

分开控制该元素的可见性。最简单的选择是使用您得到的：）