Javascript 手动创建旋转活动指示器

如果这个问题在某个地方得到了回答，我很抱歉，但我找不到它

我正在为MS Dynamics CRM开发可编辑的javascript网格，当用户单击网格上的“保存”按钮时，我试图显示加载屏幕（加载微调器应该只覆盖我的网格-它实际上是CRM窗口中显示的HTML web资源）。CRM系统保存数据并重新加载我的网格大约需要2-5秒。所以我想在这段时间内显示加载屏幕

我找到了spin.js，它似乎可以很容易地实现，但我没有意识到在什么情况下应该显示加载屏幕

基本上，我有一个表，当用户单击“保存”或“删除”按钮时，我希望显示引擎盖下正在发生的事情

---

非常感谢您的时间和帮助

听起来你知道你想从spin.js调用什么，你只是想知道从哪里调用它。您可以尝试将其添加到javascript中，其中“#saveButton”和“#deleteButton”是要启动脚本的按钮的css标识符

    $("#saveButton").click(function(){
        displayLoadingPage();
    });

    $("#deleteButton").click(function(){
        displayLoadingPage();
    });

    function displayLoadingPage() {
        //call your spin.js code here.
    }

---

让我知道这是否回答了您的问题。

我知道您已经得到了答案，但我认为您可以使用普通的JS代码，而不是使用像spin.JS这样的库

您所需要的只是： 1） 一个隐藏在页面加载上的div，它覆盖了您的表，其中有一个微调器对齐的中心 2） 在“保存/删除”按钮上，单击可使div可见。 3） 一旦从保存或删除数据的rest api收到响应，请再次隐藏div

以下是HTML：

<div class="container"> 
    <div id="loading" class="loading" onClick="hideSpinner()">
        Loading&#8230;     
    </div>
    <input type="button" value="save" / id="saveBtn" onClick="showSpinner()">
</div>

下面是一个演示：

单击覆盖上的任意位置将其关闭

---

我使用了@MattIn4D创建的覆盖图

实现微调器的方法有很多，你需要弄清楚你想要什么并详细询问。同时，请向我们提供您迄今为止尝试过的和无效的产品。是的，就是这样。所以我应该首先在displayLoadingPage（）函数中启动微调器，然后在最后停止它？好的，算出了。谢谢你的帮助，我第一次读你的代码时还不明白。现在这一切都是有意义的，当用户点击时，显示加载页面：DHi bocasa，对不起，没有看到您的评论。是的，它们会“点击”触发你的旋转事件。如果你发现这回答了你的问题，请投我一票并“接受”。）我将继续为未来的用户完善答案。这也是一段很好的代码，但我在CRM系统方面遇到了问题，并且使其正常工作，它在html web资源方面确实存在问题。当我第一次开始考虑加载屏幕时，我想让它在一两行代码中实现，但显然还有更多的东西：）+1的答案谢谢

var loadingDiv = document.getElementById('loading');

function showSpinner() {
  loadingDiv.style.visibility = 'visible';
}

function hideSpinner() {
  loadingDiv.style.visibility = 'hidden';
}