css 前端实现通过css动画实现进度条动态加载效果

/* 进度条容器样式 */
.progress-container {
  width: 100%;
  background-color: #e0e0e0;
  border-radius: 4px;
  overflow: hidden; /* 确保进度条超出容器部分不可见 */
}
 
/* 进度条样式 */
.progress-bar {
  height: 30px; /* 进度条高度 */
  width: 0%; /* 初始宽度为0 */
  background-color: #4caf50;
  border-radius: 4px;
  animation: loadProgress 2s infinite; /* 应用加载动画 */
}
 
/* 定义动画关键帧 */
@keyframes loadProgress {
  0% {
    width: 0%; /* 动画开始时宽度为0 */
  }
  100% {
    width: 100%; /* 动画结束时宽度为100% */
  }
}
 
/* HTML结构 */
<div class="progress-container">
  <div class="progress-bar"></div>
</div>

这段代码展示了如何使用CSS动画来创建一个动态的进度条效果。.progress-container 是进度条的容器，.progress-bar 是实际显示进度的元素。通过 @keyframes loadProgress 定义了一个宽度变化的动画，并将其应用到 .progress-bar 上，实现了进度条的动态加载效果。