本文已参与掘金创作者训练营第三期「话题写作」赛道,详情查看:掘力计划|创作者训练营第三期正在进行,「写」出个人影响力。
奇思妙想的进度条集合
话不多说,只收集好货。
可爱进度条
- 作者: Lucagez
- 链接:源码&Demo
- 技术:CSS progress bars made with svg patterns.
- 兼容:Chrome, Edge, Firefox, Opera, Safari
3D 进度条
- 作者: Rafael González
- 链接:源码&Demo
- 技术:HTML / CSS (SCSS)
- 兼容:Chrome, Edge, Firefox, Opera, Safari
螺纹进度条
- 作者:Kevin Sweeney
- 链接:源码&Demo
- 技术:HTML / CSS (SCSS)
- 兼容:Chrome, Edge, Firefox, Opera, Safari
💊进度条
- 作者:Constantine
- 链接:源码&Demo
- 技术:HTML (Pug) / CSS (Stylus)
- 兼容:Chrome, Edge, Firefox, Opera, Safari
Orb Progress Bar
- 作者:Ben Anderson (benjammin412)
- 链接:源码&Demo
- 技术:HTML, CSS
Wraparound Progress Bar
- 作者:Thomas Vaeth (thomasvaeth)
- 链接:源码&Demo
- 技术:HTML, CSS
阶梯 Progress Bar
- 作者:Cassidy Williams (cassidoo)
- 链接:源码&Demo
- 技术:HTML, CSS, JS
气泡 Progress Bar
- 作者:Ali Soueidan (lazercaveman)
- 链接:源码&Demo
- 技术:HTML, CSS, JS
页面阅读进度条
一个跟随页面滚动而在顶部显示进度的效果。 具体见这篇2k+点赞的文章 不可思议的纯 CSS 滚动进度条效果。
子弹进度条
- 作者:Jasper
- 链接:源码&Demo
- 技术:HTML, CSS, JS
电池进度条
- 作者:Ruben A Sanchez
- 链接:源码&Demo
- 技术:HTML, CSS, JS
环型进度条
- 作者: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 效果如下:
如果想自定义样式的话,可以通过以下类似代码实现:
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 样式让它动起来。
.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% }
}
效果如下:
完整代码见 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>
预览效果参数如下:
参数含义如下:
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>
预览效果如下
参数介绍:
- 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)"
实现效果如下:
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 环形进度条
参考致谢
感谢阅读。 有兴趣的读者可以加微信: wxmiss66 交流。
本文有参考以下文章,一并致谢。