Javascript禁用Div并弹出加载图标

当你点击一个按钮，一个上传按钮，我希望我的屏幕被禁用，并弹出一个加载图标，这样用户将无法访问表单按钮和所有内容，他们将知道他们的文件正在上传

有什么办法吗？ 提前谢谢。

一个简单的想法是 你可以有一个简单的有旋转器的div， Div应具有100%的高度和宽度

检查我的代码片段

.spinftw{
边界半径：100%；
显示：内联块；
高度：30px；
宽度：30px；
最高：50%；
位置：绝对位置；
-webkit动画：加载无限2s；
-moz动画：加载无限2s；
动画：加载无限2s；
盒影：25px-25px#3498db，-25px-25px#c0392b，-25px-25px#f1c40f，25px-25px#27ae60；
背景尺寸：包含；
}
@-webkit关键帧加载程序{
0%,
100% {
盒影：25px-25px#3498db，-25px-25px#c0392b，-25px-25px#f1c40f，25px-25px#27ae60；
}
25% {
盒影：-25px-25px#3498db，-25px-25px#c0392b，25px-25px#f1c40f，25px-25px#27ae60；
}
50% {
盒影：-25px-25px#3498db，25px-25px#c0392b，25px-25px#f1c40f，-25px-25px#27ae60；
}
75% {
盒影：25px-25px#3498db，25px-25px#c0392b，-25px-25px#f1c40f，-25px-25px#27ae60；
}
}
@-moz关键帧加载程序{
0%,
100% {
盒影：25px-25px#3498db，-25px-25px#c0392b，-25px-25px#f1c40f，25px-25px#27ae60；
}
25% {
盒影：-25px-25px#3498db，-25px-25px#c0392b，25px-25px#f1c40f，25px-25px#27ae60；
}
50% {
盒影：-25px-25px#3498db，25px-25px#c0392b，25px-25px#f1c40f，-25px-25px#27ae60；
}
75% {
盒影：25px-25px#3498db，25px-25px#c0392b，-25px-25px#f1c40f，-25px-25px#27ae60；
}
}
@关键帧加载程序{
0%,
100% {
盒影：25px-25px#3498db，-25px-25px#c0392b，-25px-25px#f1c40f，25px-25px#27ae60；
}
25% {
盒影：-25px-25px#3498db，-25px-25px#c0392b，25px-25px#f1c40f，25px-25px#27ae60；
}
50% {
盒影：-25px-25px#3498db，25px-25px#c0392b，25px-25px#f1c40f，-25px-25px#27ae60；
}
75% {
盒影：25px-25px#3498db，25px-25px#c0392b，-25px-25px#f1c40f，-25px-25px#27ae60；
}
}
身体{
/*填充：80px0*/
}
#CssLoader
{
文本对齐：居中；
身高：100%；
宽度：100%；
位置：固定；
排名：0；
左：0；
右：0；
背景：rgba（255255,0.9）；
z指数：9999；
}

---

我们的代码如下所示：

• 简单验证-如果用户不输入数据，表单将不会提交
• 如果我们输入数据并提交，则会显示overlay。用户不能

  单击表单元素上的
  -更高的
  z-index

• 按钮更改其状态-我们将输入值从“发送”更改为“处理”
• 完成请求后，表单将重置为其原始状态

检查工作示例。阅读我的评论以便更好地理解

var ourForm=document.getElementById（'form'）；
var formElements=ourForm.children；
var formOverlay=document.querySelector（“.formOverlay”）
函数formSubmit（）{
//简单验证
对于（var i=0；i

.form容器{
填充：20px；
背景：#ccc；
}
#形式{
填充：40px；
边框：1px纯黑；
位置：相对位置；
}
.表格覆盖{
显示：无；
位置：绝对位置；
宽度：100%；
身高：100%；
排名：0；
左：0；
右：0；
背景：rgba（255255,5）；
z指数：1；
}

我们的形式

我找到了答案。最后

#loadp{
背景：#000；
身高：100%；
宽度：100%；
}
#装载{
位置：绝对位置；
宽度：600px；
高度：36px；
左：50%；
最高：40%；
左边距：-300px；
溢出：可见；
用户选择：无；
游标：默认值；
}
#负荷分配{
位置：绝对位置；
宽度：20px；
高度：36px；
不透明度：0；
字体系列：Helvetica、Arial、无衬线字体；
动画：移动2s线性无限；
变换：旋转（180度）；
有限公司