分段式渐变进度条（附源码

_未知_开摆

已于 2024-08-12 11:36:13 修改

阅读量296

点赞数 3

文章标签：前端 javascript html vue 经验分享

于 2024-08-03 11:09:59 首次发布

本文链接：https://blog.csdn.net/m0_61811926/article/details/140887130

版权

采用了8个<div>，分别两个进度条，linear-gradient radial-gradient设置颜色

四个白色的小块

然后进行定位和设置边 border-radius:

test.vue

<progress-add  ref="progressAdd" style="width: 100%;border-radius: 10px"  :percent="0" /> 
<progress-add  ref="progressAdd" style="width: 100%;border-radius: 10px"  :percent="10" />
<progress-add  ref="progressAdd" style="width: 100%;border-radius: 10px"  :percent="30" />
<progress-add  ref="progressAdd" style="width: 100%;border-radius: 10px"  :percent="50" />
<progress-add  ref="progressAdd" style="width: 100%;border-radius: 10px"  :percent="70" />
<progress-add  ref="progressAdd" style="width: 100%;border-radius: 10px"  :percent="90" />
<progress-add  ref="progressAdd" style="width: 100%;border-radius: 10px"  :percent="100" />
//引入
import ProgressAdd from '@/components/ProgressAdd';

components: {ProgressAdd},

components/ProgressAdd/index.vue

<template>
  <div>
    <div class="progress-Add" style="width: 100%">
      <div class="progress">
        <div class="gray" />
        <div class="box" :style="setStyle()" />
        <div class="icon icon1" />
        <div class="icon icon2" />
        <div class="icon icon3" />
        <div class="icon icon4" />
      </div>
    </div>
    <div class="content">
      <span>区间</span>
      <span>区间</span>
      <span>区间</span>
      <span>区间</span>
      <span>区间</span>
    </div>
</div>

  </template>
  
  <script>
  export default {
    name: 'ProgressAdd',
    props: {
      percent: {
        type: Number,
        default: 0
      },
    },
    methods: {
      setStyle() {
        if(this.percent==0){
          return {
           'background-color': 'rgb(217, 232, 235)',
            'left': this.percent  + '%',
        }
      }else{ 
          return {
           'left': this.percent  + '%',
            
        }
      }
      }
    }
  }
  </script>
  
  <style scoped lang="scss">
  .progress-Add{
    display: flex;
    &>span{
      width: 50px;
    }
    .progress{
      display: inline-block;
      position: relative;
      overflow: hidden;
      flex: 1;
      border-radius: 10px;
      &>div{
        width: 100%;
        height: 15px;
      }
      .gray{
        background: linear-gradient(to right, #aac2f0, #1a0404);
        border-radius: 10px;
      }
      .box{
        position: absolute;
        top: 0;
        transition: left 1s;
        border-radius: 10px;
        background:  radial-gradient(circle at left, transparent 10px, rgb(217, 232, 235) 0)}
      .color::before{
        border-radius: 10px;
      }
  
      .icon{     
        bottom: 0;
        top: 0;
        position: absolute;
        width: 2px;
        background-color: #ffffff;
        &.icon1{
          left: 20%;
        }
        &.icon2{
          left: 40%;
        }
        &.icon3{
          left: 60%;
        }
        &.icon4{
          left: 80%;
        }
      }
    }
  }
  .content{
    span{
     display:inline-block;
     width:20%;
     margin-top:5px;
     text-align:center;
    }

  }

  </style>