知识点1: 进度条随数据变化，并添加渐变样式

最新推荐文章于 2023-05-04 17:47:28 发布

转载最新推荐文章于 2023-05-04 17:47:28 发布 · 743 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/caoxueying2018/p/9871408.html

本文详细介绍了如何使用HTML、CSS和JavaScript实现一个动态更新的进度条效果，包括线性渐变背景、动态调整宽度的进度指示点，以及通过HTTP请求加载数据并更新进度百分比的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

dom：

            //　　进度条
　　　　　　
　　　　　　　<div class="progress" :style="styleObj1">
              <div class="point"></div>
            </div>

　　　　　　　//　　数据容器
            <div class="precent">
              <counter :data="precents1" :config="config2"></counter>
            </div>

css:

 .progress{
      width: 50%;
      position: absolute;
      height: 10px;
      background: linear-gradient(to right,rgb(31,107,169),rgb(167,132,252)); //线性渐变
      border-radius: 5px;
      left: 20%;
      bottom: 22px;
      transition: all 2s; //css动画
          .point{
              width: 10px;
              height: 10px;
              border-radius: 50%;
              background: #fff;
              border: 2px solid rgb(173,133,255);
              box-sizing:content-box !important;
              position: absolute;
              top: -2px;
              right: 0px;
          }
}

export default{
    computed:{
      styleObj1(){
        return{
          width:`${this.precents1*3.1}px` //宽度变化
        }
      }
    }
}

//接数据
loaddata() {
        this.$http.indi.get('sl0057', {}, res => {
          if (res.data.data && res.data.data.length > 0) {
            try {
              this.totalvalue1 = res.data.data[0].KPI_VALUE1
              this.precents1 = res.data.data[0].KPI_VALUE2
            } catch (error) {
              console.log('**** indicator has error', error)
            }
          }
        }) 
}

转载于:https://www.cnblogs.com/caoxueying2018/p/9871408.html