关于前端:N-种仅仅使用-HTMLCSS-实现各类进度条的方式

本文将介绍如何应用 HTML/CSS 创立各种根底进度条及花式进度条及其动画的形式，通过本文，你可能能够学会：

• 通过 HTML 标签 <meter> 创立进度条
• 通过 HTML 标签 <progress> 创立进度条
• HTML 实现进度条的局限性
• 应用 CSS 百分比、突变创立一般进度条及其动画
• 应用 CSS 创立圆环形进度条
• 应用 CSS 创立球形进度条
• 应用 CSS 创立 3D 进度条

进度条，是咱们日常界面中应用的十分多的一种，上面咱们来看看。到明天，咱们能够如何实现进度条。

HTML 标签 — meter & progress

这个可能是一些同学还不太分明的，HTML5 原生提供了两个标签 <meter> 和 <progress> 来实现进度条。

• <meter>：用来显示已知范畴的标量值或者分数值
• <progress>：用来显示一项工作的实现进度，通常状况下，该元素都显示为一个进度条

咱们别离来看看，首先是 <meter> 标签：

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

meter {width: 200px;}

款式如下：

其中，min、max、value 别离示意最大值，最小值与以后值。

独一无二，咱们再来看看 <progress> 标签的用法：

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

progress {width: 200px;}

款式如下：

其中，max 属性形容这个 progress 元素所示意的工作一共须要实现多少工作量，value 属性用来指定该进度条已实现的工作量。

meter & progress 之间的差别

那么问题来了，从上述 Demo 看，两个标签的成果截然不同，那么它们的区别是什么？为什么会有两个看似一样的标签呢？

这两个元素最大的差别在于 语义上的差异。

• <meter>：示意 已知范畴内的标量测量值或分数值
• <progress>：示意 工作的实现进度

譬如，一个需要以后的完成度，应该应用 <progress>，而如果要展现汽车仪表盘以后的速度值，应该应用 meter。

meter & progress 的局限性

当然，在理论的业务需要中，或者生产环境，你简直是不会看到 <meter> 和 <progress> 标签。

和咱们在这篇文章中 —《利用 datalist 实现可过滤下拉选框》讲到的起因相似，在于：

1. 咱们无奈无效的批改 <meter> 和 <progress> 标签的款式，譬如背景色，进度前景色等。并且，最为致命的是，浏览器默认款式的体现在不同浏览器之间并不统一。这给谋求稳固，UI 体现统一的业务来说，是灾难性的毛病！
2. 咱们无奈给他增加一些动画成果、交互成果，因为一些理论的利用场景中，必定不是简略的展现一个进度条仅此而已

利用 CSS 实现进度条

因而，在现阶段，更多的还是应用一些 CSS 的形式去实现进度条。

应用百分比实现进度条

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

最简略的一个 DEMO：

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

.g-container {
    width: 240px;
    height: 25px;
    border-radius: 25px;
    background: #eee;
}
.g-progress {
    width: 50%;
    height: inherit;
    border-radius: 25px 0 0 25px;
    background: #0f0;
}

成果如下：

这种形式劣势在于应用简略，理论进度能够十分不便的传递进 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;
}

这样，每次进度变动，都是一个动静的过渡过程：

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

单标签应用突变实现

当然，能够看到，咱们下面应用的是两个标签的构造：

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

抠门点，咱们还能够仅仅利用一个标签去实现这个事件，次要借助了突变去实现这个事件：

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

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

后果如下：

同样的，咱们能够利用 HTML style 属性填写残缺的 background 值传递理论百分比，当然，这里更举荐应用 CSS 自定义属性传值：

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

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

相熟 CSS 的同学会发现一个目前这种形式的弊病，在于当批改 --progress 的值的时候，即使给 .g-progress 增加了 transition，也不会有过渡动画成果。

起因在于，CSS 中，突变（诸如 linear-gradinet、radial-gradient、conic-gradient）都是不反对过渡变换的。

所以，在这里，为了实现动画成果，咱们能够借助 CSS @property，革新下咱们的代码：

<div class="g-progress" style="--progress: 70%"></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;
}

借助 CSS @property 的个性，咱们在单标签下也是能够实现动画成果的：

CodePen Demo — 单标签的进度条成果

对 CSS @property 还不理解的，能够看看我的这篇文章 — CSS @property，让不可能变可能

当然，这里不仅仅只是上述所说的 百分比 、和 突变 两种形式能够实现这种最常见的进度条，所有能够实现长度变动的，其实都能够用于实现进度条，包含但不限于：

• 宽度（应用百分比为单位的宽度更为间接）
• 突变（管制突变的过渡点的百分比的值）
• 突变的 background-size
• transfrom: scale()（缩放也能扭转宽度大小）
• clip-path 进行裁剪
• …（等等等等）

这里不再持续开展。

圆弧形进度条

当然，进度条不可能只有直线型的。还有十分多其余类型的，上面咱们首先来看看圆弧型的进度条。

在明天，咱们能够应用 CSS 疾速的创立圆弧模式的进度条，相似于这样：

外围就是应用角向突变 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()，咱们能够轻松实现这样一个饼图：

接下来就是镂空两头局部。

传统的想法是，在两头叠加一个圆，然而，这样做的一个极大的弊病在于，如果咱们的背景不是纯色而是渐变色，就不实用了，譬如这样：

那么如何镂空两头，使得两头局部通明呢？这里咱们能够奇妙的通过 mask 属性达到目标，镂空两头：

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

这样，咱们就轻松的镂空了两头，即使背景不是纯色也不妨。

CodePen Demo – 角向突变实现圆弧形进度条

基于此拓展，还能够实现多色的圆弧型进度条：

.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%
        );
}

当然，这个可能不像进度条，更相似于饼图？

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

当然，这个办法有两个弊病。

1. 当然进度百分比不是相似于 0°、90°、180°、270°、360° 这类数字时，应用角向突变时，不同色彩间的连接处会有显著的锯齿。

看个例子 conic-gradient(#FFCDB2 0, #FFCDB2 27%, #B5838D 27%, #B5838D)：

遇到此类问题的解决方案是，在连接处，适当留出一些突变空间，咱们简略的革新一下上述角向突变代码：

{- 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% 就是为了打消锯齿的，理论扭转后的成果：

具体应用的应用，能够多调试选取既不会看出含糊，又能尽可能打消锯齿的一个范畴幅度。

2. 对于结尾和结尾须要圆形的圆弧进度条实现起来较为麻烦

还有一种状况，理论应用中，要求的是首尾带圆形的圆弧进度条，例如下图所示：

当然，这种状况当然进度条色彩是 纯色 也是能够解决的，咱们通过在在首尾处叠加两个小圆圈即可实现这种成果。

如果进度条是渐变色的话，这种进度条则须要借助 SVG/Canvas 实现了。

上述残缺的带圆角的圆弧进度条，你能够戳这里看残缺源码 — CodePen Demo — 首尾为圆形的圆弧进度条

球形进度条

球形进度条也是比拟常见的，相似于上面这种：

对于球形进度条，其实外围在于应用 CSS 实现两头局部的波浪成果。

这个技巧到明天应该曾经被大伙熟知了，就不过多赘述，一图胜千言，能够应用滚动大圆的形式，相似于这样：

容器利用 overflow: hidden，就能失去这样的成果：

对这个技巧还不了解，能够猛击这篇文章：纯 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, .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, .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;}
}

残缺的代码示例，你能够戳这里：

• CodePen Demo — Pure Css Wave Progress bar
• CodePen Demo — Pure Css Wave Progress bar Animation

3D 进度条

嗯，上面这个 3D 进度条须要对 CSS 3D 有根本的把握。

你能够先看看这篇文章 — 奇思妙想 CSS 3D 动画 | 仅应用 CSS 能制作出多惊艳的动画？

它次要是借助了一个 3D 立方体。接下来咱们来实现一个立方体进度条~

首先，实现一个立方体，构造如下：

<div class="demo-cube perspective">
  <ul class="cube">
    <li class="top"></li>
    <li class="bottom"></li>
    <li class="front"></li>
    <li class="back"></li>
    <li class="right"></li>
    <li class="left"></li>
  </ul>
</div>

咱们能够把这个立方体设想成一个平面的进度条容器，通过管制 6 面的色彩，咱们能够奇妙的失去一种 3D 进度条成果。

当然，其实咱们不须要那么多面，4 个面即可，去掉左右，而后利用突变批改一下立方体各个面的色彩，去掉 border，外围的 CSS 代码如下：

.demo-cube {
  position: relative;

  .cube {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 100px;
    transform-style: preserve-3d;
    transform: translate(-50%, -50%) rotateX(-33.5deg);

    li {
      position: absolute;
      width: 300px;
      height: 100px;
      background: linear-gradient(90deg, rgba(156, 39, 176, .3), rgba(255, 34, 109, .8) 70%, rgba(255, 255, 255, .6) 70%, rgba(255, 255, 255, .6));
    }
    .top {transform: rotateX(90deg) translateZ(50px);
    }
    .bottom {transform: rotateX(-90deg) translateZ(50px);
    }
    .front {transform: translateZ(50px);
    }
    .back {transform: rotateX(-180deg) translateZ(50px);
    }
  }
}

咱们就能够失去一个十分酷炫的 3D 进度条成果：

利用 CSS Property 给 3D 进度条加上动画

当然，进度条嘛，它须要一个填充动画。因为咱们应用的是突变实现的进度条的进度，须要去管制其中的色彩百分比变动。

而失常而言，CSS 是不反对突变的动画的，不过这也难不倒咱们，因为咱们能够应用 CSS @Property。

简略革新一下代码：

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

.demo-cube .cube {
  .top,
  .front,
  .bottom,
  .back {background: linear-gradient(90deg, rgba(255, 217, 34, .6), rgba(255, 34, 109, .8) var(--per), rgba(255, 34, 109, .1) var(--per), rgba(255, 34, 109, .1));
    animation: perChange 6s infinite;
  }
}

@keyframes perChange {
  0% {--per: 0%;}
  90%,
  to {--per: 80%;}
}

这样，咱们就实现了一个会动的 3D 进度条，只须要管制 --per CSS 自定义属性即可，成果如下：

对于 CSS @Property 不算很理解的，能够看看作者的这篇文章 — CSS @property，让不可能变可能，它的呈现，让 CSS 极大的晋升了制作各种动画的能力。

上述的残缺代码，你能够猛击这里：CSS 灵感 — 3D 立方体进度条

扩大延长

本文从简到繁介绍了应用 HTML/CSS 逐渐构建进度条的形式，并且逐步加深了难度。

当然，随着难度的晋升，失去的是更为酷炫的进度条。

基于上述的办法介绍，根本能够演化出各种咱们须要的进度条。譬如基于上述的办法，能够实现一个简略的电池充电动画：

当然，CSS 变幻无穷，进度条的品种必定也不仅仅局限于上述的几类。譬如咱们能够利用滤镜实现的仿华为手机的充电动画，也是一种进度条的出现形式，也是可能应用纯 CSS 实现的：

上述成果的残缺实现能够戳 — 巧用 CSS 实现酷炫的充电动画

又或者，咱们能够在进度条的纹理上做文章：

成果来源于 CodePen — Bars By Lucagaz。

总而言之，CSS 美好世界值得咱们去摸索。

最初

好了，本文到此结束，心愿本文对你有所帮忙 :)

想 Get 到最有意思的 CSS 资讯，千万不要错过我的公众号 — iCSS 前端趣闻 😄

更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。

如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。