<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>

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐