Vue+element UI 线形进度条添加动画
/ 修改进度条字体颜色及位置。// 修改进度条底部默认颜色。/* 进度条动画 */
·
<template>
<div>
<el-progress
percentage="55"
color="#1161E4"
></el-progress>
</div>
</template>
<style lang="scss" scoped>
/* 进度条动画 */
/deep/ .el-progress-bar__inner {
animation: slide-in 2s forwards;
}
@keyframes slide-in {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
/deep/ .el-progress-bar {
display: block !important;
padding-right: 0 !important;
}
// 修改进度条字体颜色及位置
/deep/ .el-progress__text {
font-size: 12px !important;
color: #666666;
bottom: 13px;
position: absolute;
right: 0;
}
// 修改进度条底部默认颜色
/deep/ .el-progress-bar__outer {
background-color: #ffffff;
}
</style>
更多推荐
已为社区贡献1条内容
所有评论(0)