使用JavaScript和CSS实现HTML进度条的平滑动画效果-js教程-PHP中文网

使用JavaScript和CSS实现HTML进度条的平滑动画效果

碧海醫心

发布： 2025-11-17 15:54:09

原创

927人浏览过

使用JavaScript和CSS实现HTML进度条的平滑动画效果

本教程详细阐述如何在web页面中为html `` 元素创建流畅的动画效果。通过javascript定时器逐步更新其`value`属性，并结合css的过渡特性，我们将展示一种通用且高效的方法，使进度条在视觉上平滑地从起始值过渡到目标值，显著提升用户体验，避免生硬的跳跃式变化。

理解HTML <progress> 元素

HTML5引入的<progress>元素旨在表示任务的完成进度。它主要通过两个属性来控制其状态：

value: 当前已完成的进度值。
max: 任务的总量或最大进度值。

当value属性的值发生变化时，浏览器会相应地更新进度条的显示。默认情况下，这种更新是即时的，可能导致进度条在视觉上出现生硬的跳跃，尤其是在value值变化较大时。

CSS过渡与原生进度条动画的挑战

开发者常常尝试直接使用CSS的transition属性来平滑化进度条的宽度变化。例如，在<progress>元素或其内部伪元素（如::-webkit-progress-value、::-moz-progress-bar）上设置transition: width 0.5s ease;。

progress {
  /* ...其他样式... */
  transition: width 0.5s ease; /* 尝试对整体宽度进行过渡 */
}

/* 针对WebKit内核的进度条内部填充区域 */
progress::-webkit-progress-value {
  /* ...其他样式... */
  transition: width 0.5s ease; /* 针对填充区域的宽度进行过渡 */
}

/* 针对Mozilla内核的进度条内部填充区域 */
progress::-moz-progress-bar {
  /* ...其他样式... */
  transition: width 0.5s ease; /* 针对填充区域的宽度进行过渡 */
}

登录后复制

虽然这些CSS规则有助于美化进度条的外观，但仅仅依靠CSS transition来平滑由JavaScript改变的value属性，其效果在不同浏览器中可能不尽相同。这是因为value属性的改变并非直接改变CSS的width属性，而是浏览器内部渲染逻辑的调整。为了实现可靠且跨浏览器兼容的平滑动画，我们通常需要结合JavaScript来控制value的渐进式变化。

立即学习“Java免费学习笔记（深入）”；

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

使用JavaScript实现平滑动画

实现平滑进度条动画的核心思想是利用JavaScript定时器（setInterval）以小步长、高频率地更新<progress>元素的value属性。这样，即使浏览器不完全支持CSS transition对value变化的平滑处理，通过快速连续的小幅度更新也能模拟出视觉上的平滑效果。

1. HTML结构

首先，我们需要一个带有id属性的<progress>元素，以便JavaScript能够选中并操作它。

<progress style="margin-top: 5px; border-radius: 9px;" class="listening-progress" id="smoothProgressBar" value="0" max="100"></progress>

登录后复制

2. CSS样式（可选，但推荐）

为了让进度条拥有更好的视觉表现，可以应用一些基础样式。同时，保留针对伪元素的transition属性，这在某些浏览器中可以进一步增强平滑效果。

/* 容器样式，如果需要 */
.listening-progress {
  position: relative;
  top: -15px; /* 根据布局调整 */
  width: 120px;
  margin-left: 9px;
  background-color: #2a2b2f; /* 背景色 */
  border-radius: 9px;
  height: 5px;
  border: none;
}

/* 进度条本体样式 */
progress {
  width: 120px; /* 宽度 */
  margin-right: 12px;
  background-color: #2a2b2f; /* 默认背景色 */
  border-radius: 9px; /* 圆角 */
  height: 5px; /* 高度 */
  border: none; /* 无边框 */
  /* 针对整体进度条的过渡，可能在某些浏览器中有效，但主要由伪元素控制 */
  -webkit-transition: width 0.5s;
  -moz-transition: width 0.5s;
  -ms-transition: width 0.5s;
  -o-transition: width 0.5s;
  transition: width 0.5s;    
}

/* 进度条内部填充区域的样式和过渡 */
progress::-moz-progress-bar { 
  background: #fff; /* 填充色 */
  border-radius: 9px; 
  transition: width 0.5s ease; /* 关键：平滑过渡 */
} 
progress::-webkit-progress-value { 
  background: #fff; /* 填充色 */
  border-radius: 9px; 
  transition: width 0.5s ease; /* 关键：平滑过渡 */
}
/* 针对非标准浏览器的通用样式，通常被伪元素覆盖 */
progress { 
  color: #fff; /* 备用填充色 */
  border-radius: 9px; 
  transition: width 0.5s ease; /* 备用过渡 */
}

/* 其他相关元素样式 */
.prog-time {
  color: #fff;
  font-size: 15px;
  line-height: 16px;
  border-radius: 9px;
}

登录后复制

3. JavaScript动画逻辑

以下JavaScript代码将获取进度条元素，并使用setInterval函数以设定的频率和步长更新其value属性，直到达到最大值。

document.addEventListener('DOMContentLoaded', () => {
    let progressBar = document.getElementById("smoothProgressBar");
    // 确保元素存在
    if (!progressBar) {
        console.error("Progress bar element with ID 'smoothProgressBar' not found.");
        return;
    }

    let currentProgress = 0; // 初始进度值
    const targetProgress = 100; // 目标进度值
    const speed = 1; // 每次更新增加的百分比值 (步长)
    const intervalTime = 20; // 动画更新间隔（毫秒），值越小越流畅，但性能开销越大

    // 设置进度条的最大值
    progressBar.max =

登录后复制

以上就是使用JavaScript和CSS实现HTML进度条的平滑动画效果的详细内容，更多请关注php中文网其它相关文章！