运维之家网页制作
快捷导航
首页 › 网页制作 > HTML/Xhtml › HTML/CSS 实现各类进度条：从基础到炫酷动画的完整指南

HTML/CSS 实现各类进度条：从基础到炫酷动画的完整指南

更新时间：2026-10-09 18:41:55　来源：本站整理　浏览：0

需求背景与实现思路

在开发过程中，进度条是常见的 UI 组件。由于现有插件中的进度条样式各异，难以满足定制化需求，因此使用 HTML 和 CSS 自行实现进度条成为更灵活的选择。通过本文，你将掌握如何用 HTML/CSS 创建各种基础及花式进度条，并理解其动画实现方式。

使用 HTML 原生标签创建进度条

meter 标签

meter 标签用于表示已知范围内的标量测量值，例如温度、速度等。其基本用法如下：

<p>
    <span>完成度：</span>
    <meter min="0" max="500" value="350">350 degrees</meter>
</p>

其中，min、max、value 分别表示最小值、最大值与当前值。

progress 标签

progress 标签用于表示任务的完成进度。示例代码如下：

<p>
    <label for="file">完成度：</label>
    <progress max="100" value="70"> 70% </progress>
</p>

其中，max 属性描述任务总工作量，value 属性指定已完成的工作量。

meter 与 progress 的差异

虽然两者外观相似，但语义不同：meter 表示已知范围内的标量测量值，而 progress 表示任务的完成进度。例如，展示需求完成度应使用 progress，而展示汽车仪表盘速度应使用 meter。

原生标签的局限性

在实际生产环境中，meter 和 progress 标签很少被直接使用，原因在于：

  • 样式难以自定义，无法有效修改背景色、前景色等。
  • 不同浏览器默认样式不一致，影响 UI 统一性。
  • 难以添加动画和交互效果。

使用 CSS 实现进度条

横向进度条

最常见的进度条类型是横向进度条，通常使用背景色配合百分比实现。基础示例如下：

<div>
    <div></div>
</div>

通过 CSS 自定义属性传递百分比，并借助 @property 实现动画效果：

<div></div>

@property --progress {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

.g-progress {
    margin: auto;
    width: 240px;
    height: 25px;
    border-radius: 25px;
    background: linear-gradient(90deg, #0f0, #0ff var(--progress), transparent 0);
    border: 1px solid #eee;
    transition: .3s --progress;
}

圆形进度条

圆形进度条通常使用角向渐变 conic-gradient() 实现。核心代码如下：

<div>
    <span>进度</span>
    <div>70%</div>
</div>

<style>
.progress-circle {
    position: relative;
    width: 149px;
    height: 149px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.progress-value {
    position: absolute;
    text-align: center;
    width: 100%;
    font-weight: 400;
    font-size: 26px;
}
.totalvalbox {
    min-width: 217px;
    text-align: center;
    position: absolute;
    bottom: -50px;
    font-weight: 400;
    font-size: 30px;
}
</style>
角向渐变的锯齿问题

当进度百分比不是 0°、90°、180°、270°、360° 等特殊值时，角向渐变在颜色衔接处可能出现锯齿。解决方案是在衔接处留出微小渐变空间，例如将 conic-gradient(#FFCDB2 0, #FFCDB2 27%, #B5838D 27%, #B5838D) 改为 conic-gradient(#FFCDB2 0, #FFCDB2 27%, #B5838D 27.2%, #B5838D)。

带圆角的圆形进度条

若需要圆角收尾的进度条，可在首尾叠加两个小圆点。示例代码如下：

<div>
    <div></div>
    <div></div>
</div>

<style>
.g-container {
    position: relative;
    margin: auto;
    width: 200px;
    height: 200px;
}
.g-progress {
    position: relative;
    margin: auto;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: conic-gradient(#FFCDB2 0, #FFCDB2 25%, #B5838D 25%, #B5838D);
    mask: radial-gradient(transparent, transparent 80px, #000 80.5px, #000 0);
}
.g-circle::before,
.g-circle::after {
    content: "";
    position: absolute;
    top: 90px;
    left: 90px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #FFCDB2;
    z-index: 1;
}
.g-circle::before {
    transform: translate(0, -90px);
}
.g-circle::after {
    transform: rotate(90deg) translate(0, -90px);
}
</style>
多色圆弧进度条

基于上述原理，还可以实现多色圆弧进度条，类似饼图效果：

.g-progress {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    mask: radial-gradient(transparent, transparent 50%, #000 51%, #000 0);
    background: conic-gradient(
        #FFCDB2 0, #FFCDB2 25%,
        #B5838D 25%, #B5838D 50%,
        #673ab7 50%, #673ab7 90%,
        #ff5722 90.2%, #ff5722 100%
    );
}

球形进度条

球形进度条通过控制波浪高度来表示进度百分比。核心代码如下：

<div>
    <div></div>
    <div></div>
</div>

<style>
.container {
    width: 200px;
    height: 200px;
    border: 5px solid rgb(118, 218, 255);
    border-radius: 50%;
    overflow: hidden;
}
.wave-change {
    position: absolute;
    width: 200px;
    height: 200px;
    left: 0;
    top: 0;
    animation: change 12s infinite linear;
}
.wave-change::before,
.wave-change::after {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    top: 0;
    left: 50%;
    background-color: rgba(255, 255, 255, .6);
    border-radius: 45% 47% 43% 46%;
    transform: translate(-50%, -70%) rotate(0);
    animation: rotate 7s linear infinite;
    z-index: 1;
}
.wave-change::after {
    border-radius: 47% 42% 46% 44%;
    background-color: rgba(255, 255, 255, .8);
    transform: translate(-50%, -70%) rotate(0);
    animation: rotate 9s linear -4s infinite;
    z-index: 2;
}
.wave {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: rgb(118, 218, 255);
    border-radius: 50%;
}
@keyframes rotate {
    to { transform: translate(-50%, -70%) rotate(360deg); }
}
@keyframes change {
    from { top: 80px; }
    to { top: -120px; }
}
</style>

炫酷充电动画进度条

利用 CSS 滤镜可以实现类似华为手机的充电动画效果，核心代码如下：

<div>
    <div>98.7%</div>
    <div>
        <div></div>
        <ul>
            <li></li>
            <!-- 更多 li -->
        </ul>
    </div>
</div>

<style>
html, body {
    width: 100%;
    height: 100%;
    display: flex;
    background: #000;
    overflow: hidden;
}
.g-number {
    position: absolute;
    width: 300px;
    top: 27%;
    text-align: center;
    font-size: 32px;
    z-index: 10;
    color: #fff;
}
.g-container {
    position: relative;
    width: 300px;
    height: 400px;
    margin: auto;
}
.g-contrast {
    filter: contrast(10) hue-rotate(0);
    width: 300px;
    height: 400px;
    background-color: #000;
    overflow: hidden;
    animation: hueRotate 10s infinite linear;
}
.g-circle {
    position: relative;
    width: 300px;
    height: 300px;
    box-sizing: border-box;
    filter: blur(8px);
}
.g-circle::after {
    content: "";
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0);
    width: 200px;
    height: 200px;
    background-color: #00ff6f;
    border-radius: 42% 38% 62% 49% / 45%;
    animation: rotate 10s infinite linear;
}
.g-circle::before {
    content: "";
    position: absolute;
    width: 176px;
    height: 176px;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-color: #000;
    z-index: 10;
}
.g-bubbles {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100px;
    height: 40px;
    transform: translate(-50%, 0);
    border-radius: 100px 100px 0 0;
    background-color: #00ff6f;
    filter: blur(5px);
}
li {
    position: absolute;
    border-radius: 50%;
    background: #00ff6f;
}
/* 循环生成气泡样式，此处省略具体 nth-child 规则 */
@keyframes rotate {
    50% { border-radius: 45% / 42% 38% 58% 49%; }
    100% { transform: translate(-50%, -50%) rotate(720deg); }
}
@keyframes moveToTop {
    90% { opacity: 1; }
    100% { opacity: .1; transform: translate(-50%, -180px); }
}
@keyframes hueRotate {
    100% { filter: contrast(15) hue-rotate(360deg); }
}
</style>

更多炫酷进度条推荐

除了上述实现，还可以通过 CSS 实现更多高质量进度条，例如仿华为充电动画、条形进度条等。这些效果可参考 CodePen 等平台上的优秀作品。

总结

本文详细介绍了使用 HTML/CSS 实现各类进度条的方法，包括原生标签、CSS 渐变、角向渐变、滤镜等技巧。通过合理运用这些技术，可以满足大多数业务场景的进度条需求，并实现丰富的动画效果。

原文链接：本站整理

本文来自互联网用户投稿，该文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 service@2cto.cc 进行投诉反馈，一经查实，立即处理！

HTML CSS 进度条 动画 渐变 前端开发

您可能感兴趣的文章:

上一篇：没有了
下一篇：HTML中使用Flex布局实现双行夹批效果的方法详解

相关内容