如何在 css 中实现动态加载效果

在 css 中，有多种方法可以实现动态加载效果。

遮罩法

这一方法需要绘制完整的线条，然后使用 div 结合 mask css 属性实现遮罩。遮罩的宽度会根据加载进度进行变化，可以通过 js 或其他方式获取加载情况并更新遮罩宽度。

立即学习“前端免费学习笔记（深入）”；

直接绘制法

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

也可以直接使用 canvas 或 svg 直接绘制加载效果。这种方式的好处是可以更灵活地控制加载动画。

代码示例

遮罩法：

.line {
  width: 100%;
  height: 1em;
  background: black;
}

.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: white;
  mask-image: linear-gradient(to right, transparent 0%, black 100%);
  transition: width 1s ease-in-out;
}

js 控制遮罩宽度：

const mask = document.queryselector('.mask');
const loadingprogress = 0; // 获取加载进度

mask.style.width = `${loadingprogress * 100}%`;

直接绘制法：

// 使用 canvas 或 svg 绘制加载动画

这两种方法都可以实现动态加载效果。根据项目的具体需求选择合适的方法。