使用HTML/CSS实现进度条的各种方式

用户8883156542945
989 阅读9分钟

使用HTML/CSS实现进度条的各种方式

在现代网页开发中，进度条作为一种重要的视觉元素，不仅能够增强用户体验，还能有效地传达信息和进度状态。无论是用于文件上传、下载进度，还是任务的完成状态，进度条都能够以直观的方式向用户展示进展情况。

随着HTML和CSS技术的不断发展，我们可以使用多种方法来实现进度条，既可以利用简单的HTML元素配合CSS样式，也可以通过JavaScript实现动态效果。本文将介绍如何使用 HTML/CSS 创建各种基础进度条及花式进度条及其动画的方式。

HTML 标签 -- meter & progress

HTML5 原生提供了两个标签 <meter> 和 <progress> 来实现进度条。

  • <meter>：用来显示已知范围的标量值或者分数值
  • <progress>：用来显示一项任务的完成进度，通常情况下，该元素都显示为一个进度条

让我们一起看看这两个标签的用法：

<meter>

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

<style>
meter {
  width: 200px;
}
</style>

效果展示：

image.png

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

接下来，我们在看一下另一个标签的表现：

<progress>

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

<style>
progress {
  width: 200px;
}
</style>

效果展示：

image.png

其中，max 属性描述这个 progress 元素所表示的任务一共需要完成多少工作量，value 属性用来指定该进度条已完成的工作量。

meter & progress 之间的差异

看完这两个标签的使用，这时候就会有小明说既然写法一样，效果表现也一样，为什么会存在两个呢？ 这个时候又有小明说了，从上文的描述中就可以看出这两个元素最大的差异在于语义上的差别。

  • <meter>：表示已知范围内的标量测量值或分数值
  • <progress>：表示任务的完成进度

譬如，一个需求当前的完成度，应该使用 <progress>，而如果要展示汽车仪表盘当前的速度值，应该使用 meter。

meter & progress 的局限性

在实际开发中，基本不会用到看到这两个标签。原因很简单，也是大多原生标签都存在的问题：

  1. 浏览给这类元素定义了默认样式，并且我们无法通过 CSS 去修改它们。
  2. 因为不同浏览器的实现并不相同，体现在不同浏览器的展示并不一致。
  3. 我们无法给他添加一些动画效果、交互效果。

利用 CSS 实现进度条

在现阶段，更多的选择还是使用一些 CSS 的方式去实现进度条。

使用百分比实现进度条

最为常见的一种方式是使用背景色配合百分比的方式制作进度条。

image.png

这种方式优势在于使用简单，实际进度可以非常方便的传递进 CSS 中

  1. 利用 HTML style 属性填写完整的 width 值，譬如 <div class="g-progress" style="width: 50%"></div>
  2. 或者利用 CSS 自定义属性 <div class="g-progress" style="--progress: 50%"></div> 配合实际 CSS 中的 width: var(--progress)
  3. 完全的自定义样式，以及可以轻松的添加辅助丰富的动画和交互效果

譬如给 g-progress 添加一个过渡效果：

.g-progress {
    // ...
    transition: width .2s linear;
}

3e5a4bdeba674d68b1e59b2ea3197a86~tplv-k3u1fbpfcp-zoom-1.image

或者，渐变前景色，修改 background: #0f0 为 background: linear-gradient(90deg, #0f0, #0ff)：

image.png

单标签使用渐变实现

聪明的小明又开始发散思维了，我直接用一个元素+伪类一样可以实现：

<div class="progress-bar"></div>

<style>
.progress-bar {
   position: relative;
   width: 200px;
   height: 25px;
   background-color: #f0f0f0;
   border-radius: 25px;
}

.progress-bar::after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 50%;
   background-color: #4caf50;
   border-radius: 25px 0 0 25px;
}
</style>

image.png

再抠门点，我们还可以仅仅利用一个标签去完成这个事情，主要借助了渐变去完成这个事情：

<div class="g-progress"></div>

<style>
.g-progress {
   width: 240px;
   height: 25px;
   border-radius: 25px;
   background: linear-gradient(90deg, #0f0, #0ff 70%, transparent 0);
   border: 1px solid #eee;
}
</style>

image.png

同样的，我们可以利用 HTML style 属性填写完整的 background 值传递实际百分比，当然，这里更推荐使用 CSS 自定义属性传值：

<div class="g-progress" style="--progress: 50%"></div>

<style>
.g-progress {
  background: linear-gradient(90deg, #0f0, #0ff var(--progress), transparent 0);
}
</style>

熟悉 CSS 的小明会发现一个目前这种方式的弊端，在于当修改 --progress 的值的时候，即便给 .g-progress 添加了 transition，也不会有过渡动画效果。

原因在于，CSS 中，渐变（诸如 linear-gradinet、radial-gradient、conic-gradient）都是不支持过渡变换的。

所以，在这里，为了实现动画效果，我们可以借助 CSS @property，改造下我们的代码：

<div class="g-progress" style="--progress: 70%"></div>

<style>
@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: 0.3s --progress;
}
</style>

791a3492665a44b197b5cf48f0b9047f~tplv-k3u1fbpfcp-zoom-1.image

这个时候又有小明开始疑惑三连了，CSS @property是什么？有什么用？怎么用？

对 CSS @property 还不了解的，可以看看这篇文章 -- CSS @property，开启无限可能的设计探索

当然，这里不仅仅只是上述所说的百分比、和渐变两种方式可以实现这种最常见的进度条，所有可以实现长度变化的，其实都可以用于实现进度条，包括但不限于：

  • 宽度（使用百分比为单位的宽度更为直接）
  • 渐变（控制渐变的过渡点的百分比的值）
  • 渐变的 background-size
  • transfrom: scale()（缩放也能改变宽度大小）
  • clip-path 进行裁剪
  • ...（等等等等）

这里不再继续展开。

圆弧形进度条

当然，进度条不可能只有直线型的。还有非常多其他类型的，下面我们首先来看看圆弧型的进度条。 在今天，我们可以使用 CSS 快速的创建圆弧形式的进度条，类似于这样：

image.png

核心就是使用角向渐变 background: conic-gradient()：

<div class="g-progress"></div>

.g-progress {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: conic-gradient(#FFCDB2 0, #FFCDB2 25%, #B5838D 25%, #B5838D);
}

利用角向渐变 background: conic-gradient()，我们可以轻松实现这样一个饼图：

image.png

接下来就是镂空中间部分。

传统的想法是，在中间叠加一个圆，然而，这样做的一个极大的弊端在于，如果我们的背景不是纯色而是渐变色，就不适用了，譬如这样：

image.png

那么如何镂空中间，使得中间部分透明呢？这里我们可以巧妙的通过 mask 属性达到目的，镂空中间：

CSS 属性 mask 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。

.g-progress {
   background: conic-gradient(#FFCDB2 0, #FFCDB2 25%, #B5838D 25%, #B5838D);
 + mask: radial-gradient(transparent, transparent 50%, #000 50%, #000 0);
}

这样，我们就轻松的镂空了中间，即便背景不是纯色也无妨。

image.png

角向渐变实现圆弧进度条的局限性

当然，这个方法有两个弊端。

  1. 当然进度百分比不是类似于 0°、90°、180°、270°、360° 这类数字时，使用角向渐变时，不同颜色间的衔接处会有明显的锯齿。 看个例子 conic-gradient(#FFCDB2 0, #FFCDB2 27%, #B5838D 27%, #B5838D)：

image.png

遇到此类问题的解决方案是，在衔接处适当留出一些渐变空间，简单改造一下上述角向渐变代码：

{
  - background: conic-gradient(#FFCDB2 0, #FFCDB2 27%, #B5838D 27%, #B5838D)`
  + background: conic-gradient(#FFCDB2 0, #FFCDB2 27%, #B5838D 27.2%, #B5838D)`
}

仔细看上面的代码，将从 27% 到 27% 的一个变化，改为了 从 27% 到 27.2%，这多出来的 0.2% 就是为了消除锯齿的，实际改变后的效果：

image.png

具体使用的使用，可以多调试选取既不会看出模糊，又能尽可能消除锯齿的一个范围幅度。

  1. 对于开头和结尾需要圆形的圆弧进度条实现起来较为麻烦

还有一种情况，实际使用中，要求的是首尾带圆形的圆弧进度条，例如下图所示：

image.png

当然，这种情况当然进度条颜色是纯色也是可以解决的，我们通过在在首尾处叠加两个小圆圈即可实现这种效果。 如果进度条是渐变色的话，这种进度条则需要借助 SVG/Canvas 实现了。

球形进度条

球形进度条也是比较常见的，类似于下面这种：

139522723-82f05dfc-a38e-42fa-824c-0319f3087a16.gif

对于球形进度条，其实核心在于使用 CSS 实现中间部分的波浪效果。 对这个技巧还不理解，可以猛击这篇文章：纯 CSS 实现波浪效果

应用这个技巧，只需要简单的封装，控制一下球形容器表示进度 0% - 100% 时的波浪的高度即可。我们就能得到从 0% - 100% 的动画效果。 完整的代码大概如下：

<div class="container">
  <div class="wave-change"></div>
  <div class="wave"></div>
</div>

.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;

  &::before,
  &::after {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    top: 0;
    left: 50%;
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 45% 47% 43% 46%;
    transform: translate(-50%, -70%) rotate(0);
    animation: rotate 7s linear infinite;
    z-index: 1;
  }

  &::after {
    border-radius: 47% 42% 46% 44%;
    background-color: rgba(255, 255, 255, 0.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%;
}

p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 36px;
  color: #000;
  z-index: 10;
}

@keyframes rotate {
  to {
    transform: translate(-50%, -70%) rotate(360deg);
  }
}
@keyframes change {
  from {
    top: 80px;
  }
  to {
    top: -120px;
  }
}

4fd458f1a6c34a1aa27e7d74da5e63d6~tplv-k3u1fbpfcp-zoom-1.image

扩展延伸

3D进度条

f7cf66729e404cbd97352e3236a1b419~tplv-k3u1fbpfcp-watermark.gif

电池

dba6226207e04378bd246a5e411548a0~tplv-k3u1fbpfcp-watermark.gif

安卓充电动画

d6411cd06def46f5ab2dc16cc89b3ee3~tplv-k3u1fbpfcp-watermark.gif

参考文献：

  1. N 种仅仅使用 HTML/CSS 实现各类进度条的方式
  2. 奇思妙想 CSS 3D 动画 | 仅使用 CSS 能制作出多惊艳的动画？
  3. 3D 立方体进度条
  4. 巧用 CSS 实现酷炫的充电动画
avatar
文章
阅读
粉丝