N 种仅仅使用 HTML/CSS 实现各类进度条的方式
作者：chokcoco
来源：SegmentFault 思否社区
本文将介绍如何使用 HTML/CSS 创建各种基础进度条及花式进度条及其动画的方式，通过本文，你可能可以学会：
通过 HTML 标签 <meter> 创建进度条 通过 HTML 标签 <progress> 创建进度条 HTML 实现进度条的局限性 使用 CSS 百分比、渐变创建普通进度条及其动画 使用 CSS 创建圆环形进度条 使用 CSS 创建球形进度条 使用 CSS 创建 3D 进度条
HTML 标签 -- meter & progress
<meter>：用来显示已知范围的标量值或者分数值 <progress>：用来显示一项任务的完成进度，通常情况下，该元素都显示为一个进度条
<p>
<span>完成度：</span>
<meter min="0" max="500" value="350">350 degrees</meter>
</p>
meter {
width: 200px;
}
<p>
<label for="file">完成度：</label>
<progress max="100" value="70"> 70% </progress>
</p>
progress {
width: 200px;
}
meter & progress 之间的差异
<meter>：表示已知范围内的标量测量值或分数值 <progress>：表示任务的完成进度
meter & progress 的局限性
我们无法有效的修改 <meter> 和 <progress> 标签的样式，譬如背景色，进度前景色等。并且，最为致命的是，浏览器默认样式的表现在不同浏览器之间并不一致。这给追求稳定，UI 表现一致的业务来说，是灾难性的缺点！ 我们无法给他添加一些动画效果、交互效果，因为一些实际的应用场景中，肯定不是简单的展示一个进度条仅此而已
利用 CSS 实现进度条
使用百分比实现进度条
<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;
}
利用 HTML style 属性填写完整的 width 值，譬如 <div class="g-progress" style="width: 50%"></div> 或者利用 CSS 自定义属性 <div class="g-progress" style="--progress: 50%"></div> 配合实际 CSS 中的 width: var(--progress) 完全的自定义样式，以及可以轻松的添加辅助丰富的动画和交互效果
.g-progress {
// ...
transition: width .2s linear;
}
单标签使用渐变实现
<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;
}
<div class="g-progress" style="--progress: 50%"></div>
.g-progress {
background: linear-gradient(90deg, #0f0, #0ff var(--progress), transparent 0);
}
<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;
}
宽度（使用百分比为单位的宽度更为直接） 渐变（控制渐变的过渡点的百分比的值） 渐变的 background-size transfrom: scale()（缩放也能改变宽度大小） clip-path 进行裁剪 ...（等等等等）
圆弧形进度条
<div class="g-progress"></div>
.g-progress {
width: 160px;
height: 160px;
border-radius: 50%;
background: conic-gradient(#FFCDB2 0, #FFCDB2 25%, #B5838D 25%, #B5838D);
}
.g-progress {
background: conic-gradient(#FFCDB2 0, #FFCDB2 25%, #B5838D 25%, #B5838D);
+ mask: radial-gradient(transparent, transparent 50%, #000 50%, #000 0);
}
.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%
);
}
角向渐变实现圆弧进度条的局限性
当然进度百分比不是类似于 0°、90°、180°、270°、360° 这类数字时，使用角向渐变时，不同颜色间的衔接处会有明显的锯齿。
{
- background: conic-gradient(#FFCDB2 0, #FFCDB2 27%, #B5838D 27%, #B5838D)`
+ background: conic-gradient(#FFCDB2 0, #FFCDB2 27%, #B5838D 27.2%, #B5838D)`
}
对于开头和结尾需要圆形的圆弧进度条实现起来较为麻烦
球形进度条
<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
https://codepen.io/Chokcoco/pen/EXJrdB
CodePen Demo -- Pure Css Wave Progress bar Animation
https://codepen.io/Chokcoco/pen/rNzGbWY
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>
.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);
}
}
}
利用 CSS Property 给 3D 进度条加上动画
@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%;
}
}
扩展延伸
最后
评论