以顶层为中心的gif加载器

Question

我有一个php表格。在此表单提交后，如果所有数据都有效，则它将执行一个python脚本，这需要5-10秒。在此等待期间，我希望在屏幕中央显示进度条(.gif)。如果我还可以“淡出”背景，这样进度条就像顶层一样，背景就像背层一样，那就太好了。

谢谢。

Answer 1

您是否在使用任何javascript库，例如jQuery？在任何一个库中，我都可以想象会有十几个lightbox插件漂浮在周围。即使你不想使用库，你也可以看看他们的代码，而不是显示DIV，只显示你的gif，如果你明白我的意思的话。

甚至还有一些专门为此目的而构建的插件，例如用于jQuery的BlockUI插件。

做你想做的事情的基本算法如下：

在整个页面上启动Ajax Request

• Display半透明的深色图片，中间有一个动画gif。

• 监听Ajax Request

• Display response

• Remove overlay Request

1. Display loader gif。

我假设你已经准备好了步骤1和步骤3。步骤4很简单。然而，第二步并不那么容易，但仍然不应该太难。我不能告诉你我自己做这件事的代码，因为我过去只用过lightbox插件。看看Google上的"simple lightbox“或类似的东西，因为你真正想要的是最基本的功能。这篇博客文章谈到了a CSS-only lightbox，这将是一个很好的起点，可以帮助你设计覆盖的样式。