Progress 进度条

实时预览

引入

<link rel="stylesheet" href="/tokens/tokens.css">
<link rel="stylesheet" href="/components/progress/progress.css">

代码

HTML

<!-- Progress Component — 进度条组件，支持 default、striped 和 animated 三种变体 -->


<!-- Demo: Progress 组件 -->
<div style="display: flex; flex-direction: column; gap: 32px; padding: 20px; max-width: 400px;">
  <!-- 基础进度条 -->
  <div>
    <h4 style="margin: 0 0 12px 0; font-size: var(--text-sm); color: var(--color-text-secondary);">基础进度条</h4>
    <div class="progress">
      <div class="progress__bar" style="width: 60%"></div>
    </div>
  </div>

  <!-- 带标签进度条 -->
  <div>
    <h4 style="margin: 0 0 12px 0; font-size: var(--text-sm); color: var(--color-text-secondary);">带标签进度条</h4>
    <div class="progress__container">
      <div class="progress__label">
        <span>上传进度</span>
        <span class="progress__value">75%</span>
      </div>
      <div class="progress">
        <div class="progress__bar" style="width: 75%"></div>
      </div>
    </div>
  </div>

  <!-- 条纹进度条 -->
  <div>
    <h4 style="margin: 0 0 12px 0; font-size: var(--text-sm); color: var(--color-text-secondary);">条纹进度条</h4>
    <div class="progress progress--striped">
      <div class="progress__bar" style="width: 45%"></div>
    </div>
  </div>

  <!-- 动画进度条 -->
  <div>
    <h4 style="margin: 0 0 12px 0; font-size: var(--text-sm); color: var(--color-text-secondary);">动画进度条</h4>
    <div class="progress progress--animated">
      <div class="progress__bar" style="width: 30%"></div>
    </div>
  </div>

  <!-- 不同尺寸 -->
  <div>
    <h4 style="margin: 0 0 12px 0; font-size: var(--text-sm); color: var(--color-text-secondary);">不同尺寸</h4>
    <div style="display: flex; flex-direction: column; gap: 12px;">
      <div class="progress progress--sm">
        <div class="progress__bar" style="width: 50%"></div>
      </div>
      <div class="progress">
        <div class="progress__bar" style="width: 60%"></div>
      </div>
      <div class="progress progress--lg">
        <div class="progress__bar" style="width: 70%"></div>
      </div>
    </div>
  </div>

  <!-- 不同颜色 -->
  <div>
    <h4 style="margin: 0 0 12px 0; font-size: var(--text-sm); color: var(--color-text-secondary);">不同颜色</h4>
    <div style="display: flex; flex-direction: column; gap: 12px;">
      <div class="progress progress--success">
        <div class="progress__bar" style="width: 100%"></div>
      </div>
      <div class="progress progress--warning">
        <div class="progress__bar" style="width: 65%"></div>
      </div>
      <div class="progress progress--danger">
        <div class="progress__bar" style="width: 25%"></div>
      </div>
    </div>
  </div>
</div>

<script>
// Progress 交互逻辑 - 动态更新进度条
document.addEventListener('DOMContentLoaded', function() {
  // 为动画进度条添加动态效果
  const animatedProgress = document.querySelector('.progress--animated .progress__bar');
  if (animatedProgress) {
    let width = 30;
    let direction = 1;
    
    setInterval(() => {
      width += direction * 0.5;
      if (width >= 100) {
        direction = -1;
      } else if (width <= 0) {
        direction = 1;
      }
      animatedProgress.style.width = width + '%';
    }, 50);
  }
});
</script>

CSS

/* Progress.css */
.progress {
  position: relative;
  width: 100%;
  height: 8px;
  background-color: var(--color-bg-muted);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress__bar {
  height: 100%;
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
  transition: width var(--duration-normal) var(--ease-default);
}

/* 条纹变体 */
.progress--striped .progress__bar {
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    transparent 75%,
    transparent
  );
  background-size: 1rem 1rem;
}

/* 动画变体 */
.progress--animated .progress__bar {
  animation: progress-stripes 1s linear infinite;
}

@keyframes progress-stripes {
  from {
    background-position: 1rem 0;
  }
  to {
    background-position: 0 0;
  }
}

/* 不同尺寸 */
.progress--sm {
  height: 4px;
}

.progress--lg {
  height: 12px;
}

/* 标签 */
.progress__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.progress__label {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.progress__value {
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

/* 不同颜色 */
.progress--success .progress__bar {
  background-color: var(--color-success);
}

.progress--warning .progress__bar {
  background-color: var(--color-warning);
}

.progress--danger .progress__bar {
  background-color: var(--color-danger);
}

AI 使用说明

组件名: progress
选择器: .progress
依赖: /tokens/tokens.css
文件: /components/progress/progress.html