CSS进度条与加载指示器

显示效果

PixPin_2025-08-28_13-07-49

代码如下，加了注释方便看

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS进度条与加载指示器</title>
  <style>
    /* 进度条容器样式
       设置高度、宽度、背景色和圆角 */
    .progress-bar {
      height: 10px; /* 进度条高度 */
      width: 400px; /* 进度条宽度 */
      background-color: #eee; /* 进度条背景色 */
      border-radius: 5px; /* 圆角边框 */
      position: relative; /* 设置为相对定位，用于子元素的绝对定位 */
      overflow: hidden; /* 隐藏溢出内容，确保进度指示条不超出容器 */
    }

    /* 进度条伪元素，作为实际进度指示器
       使用绝对定位覆盖在容器上 */
    .progress-bar::before {
      content: ''; /* 伪元素必需的内容属性 */
      position: absolute; /* 绝对定位，相对于进度条容器 */
      height: 100%; /* 高度与容器相同 */
      width: 45%; /* 初始宽度为45% */
      background-color: chocolate; /* 进度条颜色 */
      border-radius: 5px; /* 圆角与容器保持一致 */
      animation: anim 3s linear forwards; /* 应用动画：名称、时长、速度曲线、保持最终状态 */
    }

    /* 进度条动画关键帧定义
       控制进度条从0到100%的宽度变化和颜色变化 */
    @keyframes anim {
      0% {
        width: 0; /* 动画开始时宽度为0 */
      }
      100% {
        width: 100%; /* 动画结束时宽度为100% */
        background-color: green; /* 动画结束时变为绿色，表示完成 */
      }
    }

    /* 加载指示器（旋转器）容器样式
       创建圆形加载指示器 */
    .loader {
      width: 100px; /* 加载指示器宽度 */
      height: 100px; /* 加载指示器高度 */
      border: 5px solid #eee; /* 浅灰色边框作为背景 */
      border-radius: 50%; /* 设置为圆形 */
      position: relative; /* 相对定位，用于伪元素的定位 */
    }

    /* 加载指示器伪元素，创建旋转动画效果
       比容器稍大，仅显示顶部边框 */
    .loader::before {
      content: ''; /* 伪元素必需的内容属性 */
      position: absolute; /* 绝对定位 */
      top: -5px; /* 上偏移，补偿边框宽度 */
      left: -5px; /* 左偏移，补偿边框宽度 */
      bottom: -5px; /* 下偏移，补偿边框宽度 */
      right: -5px; /* 右偏移，补偿边框宽度 */
      border: 5px solid transparent; /* 透明边框 */
      border-radius: 50%; /* 圆形 */
      border-top: 5px solid red; /* 仅顶部边框为红色，创建弧线效果 */
      animation: animRotate 2s linear infinite; /* 应用无限旋转动画 */
    }

    /* 旋转动画关键帧定义
       控制加载指示器从0度到360度的持续旋转 */
    @keyframes animRotate {
      0% {
        transform: rotate(0deg); /* 动画开始时角度为0度 */
      }
      100% {
        transform: rotate(360deg); /* 动画结束时旋转360度（完整一圈） */
      }
    }
  </style>
</head>

<body>
  <p>进度条：</p>
  <!-- 进度条容器 -->
  <div class="progress-bar"></div>
  
  <p>加载指示器：</p>
  <!-- 加载指示器容器 -->
  <div class="loader"></div>
</body>
</html>

 

 
posted @ 2025-08-28 13:09  liessay  阅读(14)  评论(0)    收藏  举报