在所有元素顶部显示全屏不确定进度条[重复]

Posted 2023-05-07

【中文标题】在所有元素顶部显示全屏不确定进度条[重复]

【英文标题】：Showing full screen indeterminate progress bar on top of all elements [duplicate]

【发布时间】：2014-12-14 16:51:51

【问题描述】：

我想在所有屏幕元素的顶部显示一个全屏的不确定进度条。我的用例如下：

用户会看到一个表单，其中包括一个电子邮件 ID 字段。用户输入电子邮件 ID，并通过 ajax 将该 ID 与数据库匹配。虽然此操作正在进行并且正在等待通过 ajax 控制器的响应，但我希望在窗口的整个区域都可以看到全屏进度微调器，并且它必须包含文本“正在加载...”。在发生这种情况时，必须禁用所有其他控件。即我想将图像设置在所有控件之上。

验证电子邮件后，我想隐藏该图像。

我在很多网站上都看到过类似的效果。（暂时无法回忆）。 那么我该怎么做呢？（设置 z-index 对我不起作用）

编辑：

查看此 odesk.com 的屏幕截图。当您搜索工作并在左侧边栏中选中/取消选中类别时，会出现此进度条：

【问题讨论】：

您最关心的问题是什么？您是否不知道如何确定 ajax 动作的开始和结束，或者您对 css 部分有疑问？你应该展示你迄今为止尝试过的东西。

@NicoO 不确定进度条的意思是像一个圆圈一样旋转直到任务完成。

试过beforeSend（开始进度），complete（停止进度）$.ajax()选项？如果可以的话，可以发html，js吗？谢谢

是的。但是你读过我的问题吗？目前还不清楚你被困在哪里。您需要 javascript 或 css 方面的帮助吗？我们需要看到您的一些尝试来帮助您。

阅读：***.com/a/1964871/3244925

【参考方案1】：

它是函数中的 ajax 调用吗？ ?如果是这样，在函数内添加一个 gif 和文本，然后当 ajax 完成时，它将输出到页面，覆盖 gif。我有类似的东西

function ajaxrequest() 
    var waitingimage="<img src='js/ajax-loader.gif'>";
    document.getElementById('ajax_results').innerHTML =waitingimage;

然后在最后覆盖它

if (xhr.status == 200 && xhr.status < 300)         
document.    getElementById         ('ajax_results').innerHTML = xhr.responseText;