01、用三种方法实现 DIV + CSS 进度条的展示(静态以及动态)

Ⅰ、问题描述：

1、想要通过 div + css 实现一个进度条：

最好可以绑定 data 中的数据值，根据不同的值来展示出不同的占比；

2、分析：

其一、首先外面要有一层来表示进度条的宽度和长度；
其二、其次要中间的用有颜色的进度条来设置出静态的占比；
其三、最好实现动态效果；
其四、最好最好可以动态绑定数据；

Ⅱ、实现过程如下：

1、通过 div + css 实现进度条：

其一、代码为：

// 在文件组件中
<template>
  <div id="app">
  方式一：
  <div class="status-one">
      <div class="process-one"></div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.status-one {
  width: 300px;
  border: 1px #669CB8 solid;
  box-shadow: 0px 2px 2px #D0D4D6;
  height: 15px;
  border-radius: 10px;
  background: linear-gradient(180deg, #E1E9EE, white); // 此时是最新的语法；
  padding: 1px;
  margin-bottom: 30px;
  .process-one {
    background: linear-gradient(180deg, #7BC3FF, #7BC3FF);
    width: 10%;
    height: 100%;
    border-radius: 10px;
  }
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

其二、页面效果为：

2、通过 div + css 实现动态进度条(用 hover 来设置静态百分比)：

其一、代码为：

// 在文件组件中
<template>
  <div id="app">
  方式二：
    <div class="status-two">
      <div class="process-two"></div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.status-two {
  width: 300px;
  border: 1px #669CB8 solid;
  box-shadow: 0px 2px 2px #D0D4D6;
  height: 15px;
  border-radius: 10px;
  background: linear-gradient(180deg, #E1E9EE, white); // 此时是最新的语法；
  padding: 1px;
  margin-bottom: 30px;
  .process-two {
    background: linear-gradient(180deg, #7BC3FF, #7BC3FF);
    width: 5%;
    height: 100%;
    border-radius: 10px;
    transition: width 1s ease-in-out;
  }
  .process-two:hover {
    width: 60%;
  }
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

其二、页面效果为(hover之前，hover之后)：

3、通过 div + css + animation 实现动态进度条：

其一、代码为：

// 在文件组件中
<template>
  <div id="app">
  方式四:
    <div class="box animate">
      <span>
        <span></span>
      </span>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.box {
  height: 20px;
  position: relative;
  background: hsl(0, 0%, 35%);
  border-radius: 15px;
  // padding: 6px;  // 可以认为此时设置的为：横条的上下的宽度值；
  box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
  width: 300px;
  & > span {
    display: block;
    height: 100%;
    width: 50%;
    border-top-right-radius: 8px;
    border-top-left-radius: 15px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 15px;
    background-image: linear-gradient(180deg, #63DE4E, #34A702);
    box-shadow: inset 0 2px 9px  rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4);
    position: relative;
    overflow: hidden;
  }
  & > span span {
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background-image: repeating-linear-gradient(90deg, #63DE4E,#63DE4E 50%,#34A702 50%,#34A702 100%);
    z-index: 2;
    background-size: 50%;    //此时是将背景分成两份(即：分成了两个循环);
    animation: move 1s linear infinite;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    overflow: hidden;
    }
             
    @keyframes move {
      0% {
        background-position: 0 0;
      }
      100% {
        background-position: 50% 50%;
      }
    }
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

其二、页面效果为(此时是动画的效果)：

Ⅲ、小结：

其一、哪里有不对或不合适的地方，还请大佬们多多指点和交流！
其二、有兴趣的话，可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏)：https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482