文章目录
前端自主展示一个进度条动画根据后端传来的实时百分比展示进度
前端自主展示一个进度条动画
需求：后端返回true,则前端展示进度条动画 HTML部分
CSS部分
.bar{
// 蓝色逐渐向右填充动画
@keyframes prog {
0% {
width: 0;
}
100% {
width: 224px;// 动画长度和进度条长度一致
}
}
.cont,
p {
width: 224px;// 进度条长度
height: 4px;
background: #d8d8d8;// 进度条默认颜色
border-radius: 2px;
}
.cont p{
width: 0;
background-color: #006FEE; // 动画进度条颜色
animation: prog 1 2s ease forwards;
}
// 进度提示数字展示
.txt {
position: absolute;
right: 20px;
bottom: 67px;
font-size: 12px;
}
}
JS
if (result === true) { // 后端传的结果
// 数字加载
let i = 0
const interval = setInterval(() => {
i++
rate.value = i
if (i === 100) {
clearInterval(interval)
}
}, 20)//20是由动画的2s,2000ms/100(1-100数字总数)=20
根据后端传来的实时百分比展示进度
需求：根据后端返回的百分比，更新进度条 HTML
{{ rate ? rate : '0%' }}
CSS
.cont,
p {
width: 46px; // 进度条长度
height: 3px;
background: #d8d8d8; // 进度条默认底色
border-radius: 2px;
}
/* 进度条位置调整 */
.cont{
position: absolute;
top: 7px
}
.cont p{
background: linear-gradient(224deg, #005eca 0%, #003f93 100%);
}
/* 进度提示数字展示 */
.txt {
position: absolute;
bottom: -4px;
left: 54px;
}
JS
const handleList = (text) => {
//text为后端传来的百分比，string
//text='50%' parseFloat(text)=50 46为进度条长度
//rateN为进度条长度 46*0.5=0.46*50
const rateN = 0.46 * parseFloat(text)
rate.value = text
ratePercentage.value = rateN
}
精彩文章
发表评论