介绍
首屏把 Loading 文字做成可见的水波填充主体，左侧是进度切换和状态说明，右侧是实时加载卡片，适合放在活动开场、应用等待页或素材预览页中直接使用。
技术栈
页面由 index.html、styles.css 和 script.js 组成，直接双击即可运行，不依赖 npm、框架或外部 CDN。
软件架构
- index.html：负责首屏主体、交互按钮和内容信息区。
- styles.css：负责布局、视觉变量、动画节奏、响应式和 reduced-motion 降级。
- script.js：负责切换状态、更新文案、驱动动画参数和按钮反馈。
- preview.png：当前页面的真实浏览器截图，可直接作为下载页封面。
安装教程
- 下载并解压 zip 压缩包。
- 进入同名目录后双击 index.html 直接预览。
- 如果要部署到站点，把整个目录上传到静态服务器即可。
使用说明
打开页面后点击不同进度按钮，标题里的水位会同步抬升，旁边的状态胶囊和进度条也会联动更新。替换文案时只需要修改脚本里的阶段数组和标题文本。
功能讲解
- 大号 Loading 文字直接作为首屏主体，避免退化成普通海报标题。
- 水位高度、阶段描述和进度卡同步联动，形成真正可复用的 loading 组件页。
- 提供 reduced-motion 降级，关闭动画时仍保留清晰的层次和状态信息。
