奇思妙想进度条大合辑,手把手 DIY 各种进度条
发布网友
发布时间：2024-09-28 13:05
共1个回答
热心网友
时间：2024-09-28 14:18
看完以上这些进度条，你是否心动了呢？那么，让我们一起用h5标签、css、svg等技术来制作一些基本的进度条吧。
进度条最简单的实现方法就是使用html5提供的progress标签。
在chrome下，默认的无css效果如下：
如果想自定义样式，可以通过以下类似代码实现：
根据caniuse统计，progress标签的浏览器支持率达到了99.3%。如果业务不需要支持ie6-9，那么可以使用progress标签。但是，它的最大问题在于自定义样式比较复杂，需要兼容chrome、firefox，因此一般也不太使用。上述代码见html5 progress-bar using progress tag。css-trick有一篇很好的文章html5-progress-element专门介绍了这个标签，有兴趣的话可以点击阅读。
画出html结构和css基础样式：
预览效果如下：
再添加一些css样式让它动起来。
效果如下：
完整代码见progress-bar using pure html + css，还有更好看的效果。
很多时候，我们需要环型的进度条。
1、绘制圆形背景
预览效果参数如下：
参数含义如下：
svg：
circle:
2、建立进度条
预览效果如下：
参数介绍：
stroke-dasharray 当前配置的"157 157"可以理解为将圆环分为了两个部分，一部分展示线（进度条），一部分为空白（所以显示出底颜色）。因为50为半径，周长为 2 * 50 * PI = 314，所以 157 亦即 50% 的进度，剩余的 50% 为空白。这个参数具体使用也比较复杂，有兴趣可以自行研究。从我们的场景来说，只要保持两者之和为314，随意调整两者大小，即可达到实现不同进度的目的。
3、旋转90℃
靠transform="rotate(-90, 100, 100)"实现效果如下：
4、动态控制进度、显示进度文字
可以看到核心原理就是控制stroke-dasharray，在总和314不变的前提下，动态改变两个值的大小，实现不同进度效果。
动效如下，完整代码见svg环形进度条。
以前我比较喜欢读书，也买了很多书，也看了很多技术书，后来发现书不在于多，而在于经典。
读经典的书是站在巨人的肩膀上，看得远、悟得深~
所以我在这里列出的书，尽量保持少，精简。在这里也只推荐我觉得比较好的书，宁缺毋滥。
我从中挑选一些个人认为还可以的，如果感兴趣的话，可以直接下载：
