css实现进度条并用百分比展示进度

前端自主展示一个进度条动画

需求:后端返回true,则前端展示进度条动画
在这里插入图片描述
HTML部分

<div class="bar">
   <div class="cont">
     <p />
   </div>
   <span class="txt">{{ rate }}%</span>
 </div>

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

<div class="item-value">
   <div class="cont">
      <p :style="`width:${ratePercentage}px`" />
   </div>
   <span class="txt">{{ rate ? rate : '0%' }}</span>
</div>

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
  }
  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现一个圆形进度条的动态效果,可以使用CSS中的@keyframes动画和transform属性。 首先,创建一个包含圆形进度条的div元素,并设定其宽高和边框样式,使它呈现为圆形。 然后,使用CSS的@keyframes创建一个动画序列,在序列中设置进度条的旋转角度。例如,可以从0°开始旋转,到360°结束,表示进度条的完整程度。 接下来,在CSS中,为进度条的div元素添加animation属性,将刚才创建的动画序列应用于进度条上,并设定动画的持续时间、重复次数等。 最后,通过设置transform-origin属性,将进度条的旋转中心设置为圆心,使得进度条动画在圆形元素中心点进行旋转,形成动态效果。 例如,下面是一个实现50%进度的圆形进度条CSS代码示例: ```css .circle { width: 100px; height: 100px; border: 5px solid #ccc; border-radius: 50%; animation: progress 2s linear infinite; transform-origin: center center; } @keyframes progress { 0% { transform: rotate(0deg); } 100% { transform: rotate(180deg); } } ``` 这个示例中,圆形进度条的宽高为100px,边框为5px粗的灰色线条。动画序列progress中,进度条从0°开始旋转到180°,持续2秒,线性变化,并无限循环播放。进度条的旋转中心被设置为圆心。 这样,通过CSS实现了一个圆形进度条的动态效果。可以根据需要修改代码中的数值,实现不同的进度和动画效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值