CSS进度条动画无法正常运行，请求协助排查问题

1. 类名拼写错误（核心原因） #

你CSS里写的是.progess_bar（拼写错误，正确应为progress_bar，少了一个字母r），但HTML里的元素类名是progress_bar，两者不匹配，导致动画样式根本没作用到进度条上。

2. 补充必要样式（解决显示问题） #

就算修正类名，进度条也可能看不到，需要加两个关键样式：

• 给容器.loading_container加overflow: hidden，避免进度条动画时超出圆角容器
• 给进度条.progress_bar加height: 100%，确保它填满容器高度

修正后的完整代码 #

CSS

.prog {
  height: 25px;
  border-radius: 25px;
}
.loading_container {
  width: 40%;
  margin: auto;
  border: 3px solid #9985FB;
  background-color: grey;
  box-shadow: 0 0 15px #9985FB;
  overflow: hidden; /* 隐藏超出容器的部分 */
}
.progress_bar { /* 修正拼写错误 */
  width: 0;
  height: 100%; /* 填满容器高度 */
  background-color: red;
  animation: progress_bar 10s infinite;
}
@keyframes progress_bar {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

HTML

<div class="prog loading_container">
  <div class="prog progress_bar">
  </div>
</div>

内容的提问来源于stack exchange，提问作者Mohamed