当前位置：首页 > 文章列表 > 文章 > 前端 > HTML5进度条制作教程及CSS3样式实现

HTML5进度条制作教程及CSS3样式实现

2025-10-25 20:01:43 0浏览收藏

使用原生 progress 标签

HTML5 提供了元素来表示任务的完成进度，语法简单，兼容主流浏览器。

其中 value 表示当前进度值，max 是总值。例如上面代码表示进度为70%。

这个标签默认样式较基础，但可通过CSS进行美化。

自定义CSS3进度条样式

为了获得更灵活的视觉效果，可以使用 div 搭配CSS3实现进度条，这种方式更常用且可高度定制。

基本结构：

CSS样式示例：

.progress-bar {
  height: 20px;
  background-color: #f0f0f0;
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
}

.progress-fill {
  height: 100%;
  background-color: #4CAF50;
  width: 0;
  transition: width 0.4s ease;
}

通过设置 .progress-fill 的 width 动态控制进度，transition 实现平滑动画效果。

多种CSS3进度条样式变体

利用CSS3特性，可以创建丰富多样的进度条风格。

1. 渐变背景进度条

.progress-fill {
background: linear-gradient(90deg, #ff7a00, #ffcc00);
}

2. 带阴影发光效果

.progress-fill {
box-shadow: 0 0 10px rgba(255, 122, 0, 0.6);
}

3. 条纹动态进度条

.progress-fill {
  background-image: repeating-linear-gradient(
    -45deg,
    #4CAF50,
    #4CAF50 10px,
    #8BC34A 10px,
    #8BC34A 20px
  );
  animation: stripe-move 2s linear infinite;
}

@keyframes stripe-move {
  0% { background-position: 0 0; }
  100% { background-position: 40px 0; }
}

这种条纹动效常用于加载或不确定进度的场景。