奇思妙想进度条大合辑，手把手 DIY 各种进度条

crazydeng
7,315 阅读4分钟

本文已参与掘金创作者训练营第三期「话题写作」赛道，详情查看：掘力计划｜创作者训练营第三期正在进行，「写」出个人影响力。

奇思妙想的进度条集合

话不多说，只收集好货。

可爱进度条

01-CSS-Progress-Bars.gif

  • 作者： Lucagez
  • 链接：源码&Demo
  • 技术：CSS progress bars made with svg patterns.
  • 兼容：Chrome, Edge, Firefox, Opera, Safari

3D 进度条

02-Pure-CSS-Progress-Bar.gif

  • 作者： Rafael González
  • 链接：源码&Demo
  • 技术：HTML / CSS (SCSS)
  • 兼容：Chrome, Edge, Firefox, Opera, Safari

螺纹进度条

03-Static-Progress-Bar-and-with-Opposing-Animation.gif

  • 作者：Kevin Sweeney
  • 链接：源码&Demo
  • 技术：HTML / CSS (SCSS)
  • 兼容：Chrome, Edge, Firefox, Opera, Safari

💊进度条

04-light-progress-bar-HTML-CSS.gif

  • 作者：Constantine
  • 链接：源码&Demo
  • 技术：HTML (Pug) / CSS (Stylus)
  • 兼容：Chrome, Edge, Firefox, Opera, Safari

Orb Progress Bar

05-orb-progress-bar.gif

  • 作者：Ben Anderson (benjammin412)
  • 链接：源码&Demo
  • 技术：HTML, CSS

Wraparound Progress Bar

06-progress-bar.gif

  • 作者：Thomas Vaeth (thomasvaeth)
  • 链接：源码&Demo
  • 技术：HTML, CSS

阶梯 Progress Bar

07-stepped-progress-bar.gif

  • 作者：Cassidy Williams (cassidoo)
  • 链接：源码&Demo
  • 技术：HTML, CSS, JS

气泡 Progress Bar

08-loading-bar.gif

  • 作者：Ali Soueidan (lazercaveman)
  • 链接：源码&Demo
  • 技术：HTML, CSS, JS

页面阅读进度条

一个跟随页面滚动而在顶部显示进度的效果。 具体见这篇2k+点赞的文章 不可思议的纯 CSS 滚动进度条效果。

子弹进度条

09-111.png

  • 作者：Jasper
  • 链接：源码&Demo
  • 技术：HTML, CSS, JS

电池进度条

10-xxx.png

  • 作者：Ruben A Sanchez
  • 链接：源码&Demo
  • 技术：HTML, CSS, JS

环型进度条

11-svg-circle-progress-bar-2.png

  • 作者：Ekta maurya
  • 链接：源码&Demo
  • 技术：HTML, CSS, JS

自己 DIY

看完以上几种进度条之后，有木有心动，那我们自己用h5标签、css、svg 等技术实现一些基础的长条、环型进度条吧。

progress 标签进度条

进度条最简单的实现是利用 html5 提供的 progress 标签。

<progress max="100" value="80" class="h5tag">
<!-- 支持 progreess标签 的浏览器会忽略掉 progress 内部的内容， -->
<!-- 不支持 progreess标签 的浏览器会渲染progress 内部的内容，忽略 progreess标签 -->
    <div class="progress-bar">
      <span style="width: 80%">80%</span>
    </div>
</progress>
<br>
<progress>
</progress>

chrome 下默认的无 css 效果如下：

1.gif

如果想自定义样式的话，可以通过以下类似代码实现：

progress::-webkit-progress-bar, progress::-moz-progress-bar {
  /* style rules */
  /* 控制进度条背景部分 */
}
progress::-webkit-progress-value, progress::-moz-progress-value {
  /* style rules */
  /* 控制进度条有值部分 */
}

根据 caniuse 统计，progress 标签浏览器支持率为 99.3%。如果业务不需要支持 ie6-9，是可以放心大胆使用 progress 标签。但其最大的问题，还是自定义样式比较复杂，需要兼容 chrome、firefox，所以一般也不太使用。

上述代码见 html5 progress-bar using progresss tag。css-trick 有篇很好的文章html5-progress-element专门介绍了这个标签，有兴趣可点击阅读。

长条进度条

画出 html 结构和 css 基础样式：

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

.container {
  margin: 100px auto;
  width: 500px;
  text-align: center;
}

.progress {
  padding: 6px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}

.progress-bar {	
  height: 18px;	
  background-color: #FCBC51;  
  border-radius: 4px; 
  width: 50%;
}

预览效果如下： css-1.png

再加一些 css 样式让它动起来。


.progress-striped .progress-bar { 
  transition: 0.4s linear;  
  transition-property: width, background-color;
  background-image: linear-gradient(
        45deg, rgb(252,163,17) 25%, 
        transparent 25%, transparent 50%, 
        rgb(252,163,17) 50%, rgb(252,163,17) 75%,
        transparent 75%, transparent); 
  animation: progressAnimationStrike 3s infinite;
}

@keyframes progressAnimationStrike {
     from { width: 0 }
     to   { width: 50% }
}

效果如下：

2.gif

完整代码见 progress-bar using pure html + css，还有更好看的效果。

环形进度条

很多时候，我们需要环型的进度条。

1、绘制圆形背景

<svg width="200" height="200" viewBox="0 0 200 200">
     <circle cx="100" cy="100" r="50" fill="none" stroke-width="10" stroke="gray" />
</svg>

预览效果参数如下：

WX20210822-221721@2x.png

参数含义如下：

svg：

  • width，height: 分别表示svg元素的宽高
  • viewBox: 控制位移和可容纳的大小

circle:

  • cx、cy：圆心的位置
  • r：表示半径
  • fill: circle 圆的填充色
  • stroke-width：边框宽度
  • stroke：边框的填充色

2、建立进度条

 <svg width="200" height="200" viewBox="0 0 200 200">
    <circle cx="100" cy="100" r="50" fill="none" stroke-width="10" stroke="gray" />
    <circle id="circle" stroke-linecap="round" cx="100" cy="100" r="50" fill="none" stroke-width="10" stroke="pink" stroke-dasharray="157 157"/>
 </svg>

预览效果如下

2.png

参数介绍：

  • stroke-linecap="round"，圆角效果
  • stroke-dasharray：进度条控制。"157 157" 实现达到展示 50% 的效果。

stroke-dasharray 当前配置的"157 157"可以理解为将圆环分为了两个部分，一部分展示线（进度条），一部分为空白（所以显示出底颜色）。因为50为半径，周长为 2 * 50 * PI = 314，所以 157 亦即 50% 的进度，剩余的 50% 为 空白。

这个参数具体使用也比较复杂，有兴趣可以自行研究。从我们的场景来说，只要保持两者之和为 314 ，随意调整两者大小，即可达到实现不同进度。

3、旋转90℃

<circle id="circle" stroke-linecap="round"  cx="100" cy="100" r="50" fill="none" stroke-width="10" stroke="pink" stroke-dasharray="157 157" transform="rotate(-90, 100, 100)"/>

靠 transform="rotate(-90, 100, 100)"实现效果如下：

3.png

4、动态控制进度、显示进度文字

 <svg width="200" height="200" viewBox="0 0 200 200">
    ...
    <text x="100" y="100" fill="#6b778c" text-anchor="middle" dominant-baseline="central">
      <tspan id="percent">0</tspan>%
    </text> 
 </svg>
 <div>
  <button onclick="add()">add</button>
  <button onclick="minus()">minus</button>
</div>

let circle = document.getElementById('circle');
let percent = document.getElementById('percent');

let radius = 50;
let v = 0.5;

function minus() {
    v = v - 0.01
    if (v <= 0) {
        v = 0;
    }
    set(v);
}
function add() {
    v = v + 0.01;
    if (v >= 1) {
        v = 1;
    }
    set(v);
}

function set(p) {
    let total = Math.PI * 2 * radius;
    percent.innerHTML = Math.round(p * 100);
    let str = `${p * total} ${total * (1-p)}`;
    console.log('stroke-dasharray:', str);
    circle.style['stroke-dasharray'] = str;
}

setTimeout(() => {
  set(v)
}, 1000);

可以看到核心原理就是控制 stroke-dasharray，在总和314不变的前提下，动态改变两个值的大小，实现不同进度效果。

动效如下，完整代码见 svg 环形进度条

4.gif

参考致谢

感谢阅读。 有兴趣的读者可以加微信: wxmiss66 交流。

dianzan3.gif

本文有参考以下文章，一并致谢。

avatar
文章
阅读
粉丝