CSS如何实现动态loading效果？

动态loading效果是前端页面中常见的交互元素，当页面数据加载、接口请求时展示，能缓解用户的等待焦虑。纯CSS实现动态loading效果不需要额外的JavaScript逻辑，性能更优且实现方式灵活，下面介绍具体的实现方法。

实现动态loading的核心CSS属性

纯CSS实现动态loading效果主要依赖两个核心模块：关键帧动画定义和动画属性绑定。

1. @keyframes关键帧规则

@keyframes用于定义动画在不同时间节点的样式状态，语法格式如下：

/* 定义名为rotate的动画，从0%到100%的状态变化 */
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

2. animation动画属性

animation属性用于将定义好的关键帧动画绑定到指定元素上，常用子属性包括：

• animation-name：指定要绑定的关键帧动画名称，对应@keyframes定义的名称
• animation-duration：动画完成一个周期所需的时长，单位为s或ms
• animation-timing-function：动画的速度曲线，常用值有linear（匀速）、ease（缓入缓出）等
• animation-iteration-count：动画播放次数，infinite表示无限循环
• animation-delay：动画延迟多久开始播放

也可以直接使用animation简写属性，格式为：animation: 动画名称 时长 速度曲线 延迟 播放次数 方向 填充模式 是否暂停。

常见动态loading效果实现案例

案例1：旋转圆环loading

这是最常见的loading样式，通过圆环旋转实现动态效果，代码如下：

<div class="rotate-loading"></div>

.rotate-loading {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3; /* 浅色边框作为背景圆环 */
  border-top: 4px solid #3498db; /* 顶部深色边框作为旋转部分 */
  border-radius: 50%; /* 设置为圆形 */
  animation: rotate 1s linear infinite; /* 绑定旋转动画，1秒完成一次，匀速，无限循环 */
}

/* 定义旋转关键帧 */
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

案例2：跳动圆点loading

多个圆点依次跳动的loading效果，通过给不同圆点设置不同的动画延迟实现，代码如下：

<div class="dot-loading">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>

.dot-loading {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dot {
  width: 12px;
  height: 12px;
  background-color: #3498db;
  border-radius: 50%;
  animation: bounce 1.2s infinite ease-in-out;
}

/* 第二个圆点延迟0.2秒播放动画 */
.dot:nth-child(2) {
  animation-delay: 0.2s;
}

/* 第三个圆点延迟0.4秒播放动画 */
.dot:nth-child(3) {
  animation-delay: 0.4s;
}

/* 定义跳动关键帧 */
@keyframes bounce {
  0%, 80%, 100% {
    transform: scale(0.6); /* 缩小状态 */
    opacity: 0.5;
  }
  40% {
    transform: scale(1); /* 正常大小状态 */
    opacity: 1;
  }
}

案例3：进度条式loading

模拟进度加载的loading效果，通过宽度变化实现动态效果，代码如下：

<div class="progress-loading">
  <div class="progress-bar"></div>
</div>

.progress-loading {
  width: 200px;
  height: 4px;
  background-color: #f3f3f3;
  border-radius: 2px;
  overflow: hidden;
}

.progress-bar {
  width: 0;
  height: 100%;
  background-color: #3498db;
  border-radius: 2px;
  animation: progress 2s ease-in-out infinite;
}

/* 定义进度变化关键帧 */
@keyframes progress {
  0% {
    width: 0;
    margin-left: 0;
  }
  50% {
    width: 60%;
    margin-left: 20%;
  }
  100% {
    width: 0;
    margin-left: 100%;
  }
}

实现注意事项

在使用CSS实现动态loading效果时，需要注意以下几点：

• 动画时长不要设置过长，一般1-2秒完成一个周期比较符合用户感知
• 如果loading元素需要隐藏，建议使用display: none配合条件渲染，避免不可见时仍消耗动画性能
• 对于低性能设备，尽量简化动画的变形操作，减少transform的复杂计算
• 如果要兼容旧版本浏览器，需要添加对应浏览器的私有前缀，比如-webkit-animation、-moz-animation等

纯CSS实现的动态loading效果不需要依赖任何JavaScript库，体积小且性能稳定，适合大多数常规的前端加载场景使用。

CSSloading动画keyframestransformanimation修改时间：2026-07-04 05:03:25