--- theme: cyanosis --- 本文已参与掘金创作者训练营第三期「话题写作」赛道，详情查看：[掘力计划｜创作者训练营第三期正在进行，「写」出个人影响力](https://juejin.cn/post/6994417198164869133)。 ## 奇思妙想的进度条集合话不多说，只收集好货。 ### 可爱进度条 ![01-CSS-Progress-Bars.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/914c20e330c64f30970d9367c0a71734~tplv-k3u1fbpfcp-watermark.image) - 作者： Lucagez - 链接：[源码&Demo](https://codepen.io/lucagez/pen/ReMLVV) - 技术：CSS **progress bars** made with svg patterns. - 兼容：Chrome, Edge, Firefox, Opera, Safari ### 3D 进度条 ![02-Pure-CSS-Progress-Bar.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e71dcc1dfb484bde9414da845207aaea~tplv-k3u1fbpfcp-watermark.image) - 作者： Rafael González - 链接：[源码&Demo](https://codepen.io/rgg/pen/QbRyOq) - 技术：HTML / CSS (SCSS) - 兼容：Chrome, Edge, Firefox, Opera, Safari ### 螺纹进度条 ![03-Static-Progress-Bar-and-with-Opposing-Animation.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e396af5167b144dcbf07fc7c3c84eb61~tplv-k3u1fbpfcp-watermark.image) - 作者：Kevin Sweeney - 链接：[源码&Demo](https://codepen.io/restlessdesign/pen/CJrad) - 技术：HTML / CSS (SCSS) - 兼容：Chrome, Edge, Firefox, Opera, Safari ### 💊进度条 ![04-light-progress-bar-HTML-CSS.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/71a6990082d94ffdbadba83d9c14a607~tplv-k3u1fbpfcp-watermark.image) - 作者：Constantine - 链接：[源码&Demo](https://codepen.io/museum404/pen/EVzRvv) - 技术：HTML (Pug) / CSS (Stylus) - 兼容：Chrome, Edge, Firefox, Opera, Safari ### Orb Progress Bar ![05-orb-progress-bar.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d9ff0b50496343a58180891cf649831e~tplv-k3u1fbpfcp-watermark.image) - 作者：Ben Anderson (benjammin412) - 链接：[源码&Demo](https://codepen.io/benjammin412/pen/IaqJK) - 技术：HTML, CSS ### Wraparound Progress Bar ![06-progress-bar.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e6a85f95d9f84733965d5a245cc092fe~tplv-k3u1fbpfcp-watermark.image) - 作者：Thomas Vaeth (thomasvaeth) - 链接：[源码&Demo](https://codepen.io/borntofrappe/pen/gNLKBw) - 技术：HTML, CSS ### 阶梯 Progress Bar ![07-stepped-progress-bar.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/401bb50094134eda9ca2ac2812c77253~tplv-k3u1fbpfcp-watermark.image) - 作者：Cassidy Williams (cassidoo) - 链接：[源码&Demo](https://codepen.io/cassidoo/pen/wEXQaG) - 技术：HTML, CSS, JS ### 气泡 Progress Bar ![08-loading-bar.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bea2f26becf14647bd0e35d170d319cb~tplv-k3u1fbpfcp-watermark.image) - 作者：Ali Soueidan (lazercaveman) - 链接：[源码&Demo](https://codepen.io/internette/pen/KqyxjE) - 技术：HTML, CSS, JS ### 页面阅读进度条一个跟随页面滚动而在顶部显示进度的效果。具体见这篇2k+点赞的文章 [不可思议的纯 CSS 滚动进度条效果](https://juejin.cn/post/6844903758074216462)。 ### 子弹进度条 ![09-111.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bc07166c0c34489e9d14d8293b67e062~tplv-k3u1fbpfcp-watermark.image) - 作者：Jasper - 链接：[源码&Demo](https://codepen.io/jasper/pen/GRqgPLK) - 技术：HTML, CSS, JS ### 电池进度条 ![10-xxx.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ff65cf4f714b436195797b1db51d79a0~tplv-k3u1fbpfcp-watermark.image) - 作者：Ruben A Sanchez - 链接：[源码&Demo](https://codepen.io/rubenasanchez/pen/eYzOqNG) - 技术：HTML, CSS, JS ### 环型进度条 ![11-svg-circle-progress-bar-2.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ac3935f6575b4da1aec76da00429cc35~tplv-k3u1fbpfcp-watermark.image) - 作者：Ekta maurya - 链接：[源码&Demo](https://codepen.io/Curlmuhi/pen/qBZRWby) - 技术：HTML, CSS, JS ## 自己 DIY 看完以上几种进度条之后，有木有心动，那我们自己用h5标签、css、svg 等技术实现一些基础的长条、环型进度条吧。 ## progress 标签进度条进度条最简单的实现是利用 html5 提供的 progress 标签。 ```html

80%

``` chrome 下默认的无 css 效果如下： ![1.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a44831cdefa24e6c846cb017194e98cb~tplv-k3u1fbpfcp-watermark.image) 如果想自定义样式的话，可以通过以下类似代码实现： ```css progress::-webkit-progress-bar, progress::-moz-progress-bar { /* style rules */ /* 控制进度条背景部分 */ } progress::-webkit-progress-value, progress::-moz-progress-value { /* style rules */ /* 控制进度条有值部分 */ } ``` 根据 [caniuse 统计](https://caniuse.com/?search=progress)，`progress` 标签浏览器支持率为 99.3%。如果业务不需要支持 ie6-9，是可以放心大胆使用 progress 标签。但其最大的问题，还是自定义样式比较复杂，需要兼容 chrome、firefox，所以一般也不太使用。上述代码见 [html5 progress-bar using progresss tag](https://codepen.io/SunLn/pen/vYZByZj)。css-trick 有篇很好的文章[html5-progress-element](https://css-tricks.com/html5-progress-element/)专门介绍了这个标签，有兴趣可点击阅读。 ## 长条进度条画出 html 结构和 css 基础样式： ```html

``` ```css .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](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a56e1d5086b34485b82761b2ac07b9b4~tplv-k3u1fbpfcp-watermark.image) 再加一些 css 样式让它动起来。 ```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](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9496787f7ed44aafb382245cbbc39561~tplv-k3u1fbpfcp-watermark.image) 完整代码见 [progress-bar using pure html + css](https://codepen.io/SunLn/pen/jOwNYBx)，还有更好看的效果。 ## 环形进度条很多时候，我们需要环型的进度条。 ### 1、绘制圆形背景 ```html ``` 预览效果参数如下： ![WX20210822-221721@2x.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/72ecbcb0c8e649e0a22ea6835c1edf9f~tplv-k3u1fbpfcp-watermark.image) 参数含义如下： **svg：** - width，height: 分别表示svg元素的宽高 - viewBox: 控制位移和可容纳的大小 **circle:** - cx、cy：圆心的位置 - r：表示半径 - fill: circle 圆的填充色 - stroke-width：边框宽度 - stroke：边框的填充色 ### 2、建立进度条 ```html ``` 预览效果如下 ![2.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1835428152f24c35b2e57e0ab13ab6a7~tplv-k3u1fbpfcp-watermark.image) 参数介绍： - stroke-linecap="round"，圆角效果 - stroke-dasharray：进度条控制。"157 157" 实现达到展示 50% 的效果。 stroke-dasharray 当前配置的"157 157"可以理解为将圆环分为了两个部分，一部分展示线（进度条），一部分为空白（所以显示出底颜色）。因为50为半径，周长为 2 * 50 * PI = 314，所以 157 亦即 50% 的进度，剩余的 50% 为空白。这个参数具体使用也比较复杂，有兴趣可以自行研究。从我们的场景来说，只要保持两者之和为 314 ，随意调整两者大小，即可达到实现不同进度。 ### 3、旋转90℃ ``` ``` 靠 `transform="rotate(-90, 100, 100)"`实现效果如下： ![3.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2d1f9c7f49114a4bb20dcc0391ed2889~tplv-k3u1fbpfcp-watermark.image) ### 4、动态控制进度、显示进度文字 ```html

``` ```js 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 环形进度条](https://codepen.io/SunLn/pen/GREKdzM) ![4.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bb303543514b42058d513bd5baab4493~tplv-k3u1fbpfcp-watermark.image) ## 参考致谢感谢阅读。有兴趣的读者可以加微信: wxmiss66 交流。 ![dianzan3.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6bbd6ef92b224ed3ada6e2f1d430b6f8~tplv-k3u1fbpfcp-watermark.image) 本文有参考以下文章，一并致谢。 - [30 Awesome CSS Progress Bars](https://devsnap.me/css-progress-bars) - [svgCircle](https://minjiechang.github.io/css/svgCircle/)