Softonic

遮罩层加载动画 CSS 生成器

步 1 / 2
下一步

加载遮罩层会用半透明的图层覆盖页面，并在中央显示加载动画。先在这里生成加载动画，再添加下方简短的外层包裹 CSS，使其在内容上方居中显示。

如何制作遮罩层加载动画

  1. 1

    选择较大的尺寸

    在尺寸栏中输入 70 到 90，在粗细栏中输入 6 到 8，使加载动画在整个页面上也清晰可见。

  2. 2

    选择醒目的颜色

    选择一种在遮罩背景上十分醒目的弧线颜色。

  3. 3

    复制生成的 CSS

    使用复制按钮复制加载器和 @keyframes 规则。

  4. 4

    添加外层包裹

    粘贴本页的遮罩层规则，并将加载器放入外层包裹中。

两部分：加载动画与遮罩层

生成器产出的是加载动画，即 .loader 类和 @keyframes spin 规则。遮罩层是一个单独的外层包裹，需要你自己添加。它覆盖整个视口，并将子元素居中。这种拆分方式很实用：同一个加载动画可以用在按钮或卡片中，只有在需要阻止用户操作的状态时，才使用外层包裹。

外层包裹的 CSS

将以下内容粘贴在生成的规则之后：

.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.75);
  z-index: 1000;
}

<div class="overlay" role="status" aria-label="加载中">
  <div class="loader"></div>
</div>

position: fixed 搭配 inset: 0 会让图层延伸到屏幕的四条边。flex 设置让加载动画在水平和垂直方向都居中。z-index 保证图层位于普通内容之上，如果头部或弹窗仍显示在上方，请调大这个值。

只覆盖某个区域而非整个页面

如果只有某个卡片或表格在加载，请为其容器设置 position: relative，并把外层包裹改为 position: absolute：

.panel { position: relative; }
.panel .overlay { position: absolute; }

页面其余部分仍可使用，只有该面板会被遮罩。

选择与页面匹配的遮罩颜色

页面背景 遮罩背景 弧线颜色
白色 rgba(255, 255, 255, 0.75) 品牌色
深色 rgba(0, 0, 0, 0.6) 浅色或亮色

在深色页面上，也请修改粘贴的加载器 CSS 中的轨道颜色 #eee，避免圆环发出过强的光。

良好实践

  • 工作完成后立即移除遮罩，否则页面会一直处于被阻挡的状态。
  • 遮罩适合短时间等待。对于耗时较长的操作，请显示说明当前进展的文字。
  • 遮罩层和焦点处理属于你自己的标记。本工具只输出加载动画。

阻止页面滚动

固定遮罩会挡住页面，但遮罩后面的页面仍可通过滚轮或触摸滚动。如果这一点很重要，请在遮罩显示期间为 body 添加 overflow: hidden;，遮罩消失时再移除。让这条规则与显示和隐藏遮罩的时机保持同步，避免两者脱节。

常见问题

不会。生成器只创建加载动画的 CSS。遮罩的外层包裹是本页展示的几行额外 CSS，你需要把它粘贴到加载动画旁边。

将外层包裹设为 inset: 0 的固定定位，并使用 display: flex、align-items: center 和 justify-content: center。这样加载动画就会位于中央。

说明有其他元素的层级更高。请把遮罩的 z-index 设置得比该元素更高。

会。覆盖整个屏幕的固定图层会代替其下方的元素接收点击，这通常正是加载期间所需要的效果。

相关工具

Webpack 配置生成器

为纯 JavaScript、React 或 Vue 项目生成 webpack 5 的 webpack.config.js：支持 TypeScript、Babel、CSS 或 Sass、图片、HtmlWebpackPlugin、开发服务器，并给出 npm install 命令。

ASCII 表参考

完整 ASCII 表，覆盖 0 到 127；列出每个代码的十进制、十六进制、八进制、二进制值和 HTML 数字字符引用写法，包括 NUL、LF、DEL。

Protocol Buffers 解码器

在浏览器中解码 hex、Base64、Base64URL、文本或文件中的 Protobuf 线格式字节，准确检查字段候选解释并导出私密报告。

XML 格式化工具

以一致的缩进美化 XML 文档，并精确定位到行号，捕获格式良好性错误。

HTML 字符参考

可搜索的 HTML 实体列表，含命名代码与数值代码，并支持一键复制特殊字符和符号。

文件大小转换器

在字节、KB、MB、GB、TB及IEC二进制单位（KiB、MiB、GiB、TiB）之间转换，可自由组合十进制与二进制。

此工具还提供其他语言版本

使用指南与应用场景