一、基础进度条
首先，我们来看一下如何使用CSS样式创建最基本的进度条。我们可以使用CSS的linear-gradient属性来创建一个从左到右渐变的背景色。然后，通过设置width属性来控制进度条的完成度。
<div class="progress">
<div class="progress-bar" style="width: 50%;"></div>
</div>
.progress {
width: 100%;
height: 10px;
background-color: #d3d3d3;
}
.progress-bar {
height: 100%;
background: linear-gradient(to right, #fcc419, #ff9c00);
}
在这个例子中，我们创建了一个高度为10px的进度条，进度条的完成度为50%。可以通过修改进度条的宽度来改变进度条的完成度。
通过更改定义进度条的CSS，我们可以进一步更改进度条的样式。例如，我们可以更改高度和圆角大小等属性。
.progress {
width: 100%;
height: 20px;
border-radius: 5px;
background-color: #d3d3d3;
}
.progress-bar {
height: 100%;
border-radius: 5px;
background: linear-gradient(to right, #fcc419, #ff9c00);
}
二、带有文本标签的进度条
一般情况下，进度条都会和文本标签一起使用，以更好的展示进度的完成情况。我们可以在进度条中添加一个文本标签，来显示进度条的完成度百分比。
<div class="progress">
<div class="progress-bar" style="width: 50%;"></div>
<span class="progress-text">50%</span>
</div>
.progress {
width: 100%;
height: 30px;
border-radius: 5px;
background-color: #d3d3d3;
position: relative;
}
.progress-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 14px;
}
.progress-bar {
height: 100%;
border-radius: 5px;
background: linear-gradient(to right, #fcc419, #ff9c00);
}
在这个例子中，我们通过绝对定位，将文本标签放在进度条的中间位置，使用translate属性对文本进行调整。此外，我们还为文本添加了一个白色的字体颜色，以便它更加突出。
三、带有动画效果的进度条
动画效果可以让进度条更加动态和有趣。我们可以使用transition属性来为进度条添加动画。此外，我们也可以使用伪元素为进度条添加动态效果。
<div class="progress">
<div class="progress-bar" style="width: 50%;"></div>
</div>
.progress {
width: 100%;
height: 40px;
border-radius: 5px;
background-color: #d3d3d3;
position: relative;
}
.progress-bar {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 0;
background: linear-gradient(to right, #fcc419, #ff9c00);
transition: width 1s ease;
}
.progress-bar::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 10px;
background-color: #fff;
opacity: 0.1;
animation: pulse 2s ease infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
opacity: 0.1;
}
50% {
transform: scale(2);
opacity: 0.2;
}
100% {
transform: scale(1);
opacity: 0.1;
}
}
在这个例子中，我们使用了transition属性为进度条添加了一个从0到50%的动画效果。此外，使用伪元素为进度条添加了一个脉动动画，在进度条上方添加了一层半透明的白色背景色，使得进度条更加鲜明、有活力。
以上是几种不同的进度条样式，我们可以根据实际需求进行选择和调整。希望这篇文章对你有所帮助！
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/152267.html
微信扫一扫 
支付宝扫一扫 