当前位置：首页 > 文章列表 > 文章 > 前端 > HTML进度条实现教程：CSSJS完整指南

HTML进度条实现教程：CSSJS完整指南

2025-10-02 18:21:45 0浏览收藏

1. HTML 结构

使用语义化标签作为基础，同时提供一个容器用于自定义样式和显示文本：

30%

2. CSS 样式设计

隐藏默认外观，创建自定义进度条，支持圆角、背景色、填充颜色和过渡动画：

.progress-bar {
  width: 300px;
  font-family: Arial, sans-serif;
  text-align: center;
}

progress {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 24px;
  border: none;
  border-radius: 12px;
  background-color: #e0e0e0;
  overflow: hidden;
}

progress::-webkit-progress-bar {
  background-color: #e0e0e0;
  border-radius: 12px;
}

progress::-webkit-progress-value {
  background-color: #4caf50;
  border-radius: 12px;
  transition: width 0.3s ease;
}

progress::-moz-progress-bar {
  background-color: #4caf50;
  border-radius: 12px;
}

.progress-text {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: #555;
}

3. JavaScript 动态控制

通过JS修改value值并同步更新显示文本，实现交互功能：

function updateProgress(value) {
  const progress = document.getElementById('progress');
  const text = document.querySelector('.progress-text');
  // 限制值在0-100之间
  value = Math.max(0, Math.min(100, value));
  progress.value = value;
  text.textContent = value + '%';
}

function increaseProgress() {
  const current = document.getElementById('progress').value;
  updateProgress(current + 10);
}

function resetProgress() {
  updateProgress(0);
}