jq+css实现 进度条动画——从0到指定位置——基础积累_css进度条动画

场景

最近在写看板样式，有个效果如下：是一个进度条，需要有一个动画，从0加载到指定位置的一个效果。

看板中进度条加载动画，进度条是通过代码编写的，动画是通过css的animation动画实现的。

具体代码如下：

1.html代码

<div class="progressWrap">
	<em class="progress progress_box" style="margin:10px 0">
	   <i>
	        <span></span>
	    </i>
	</em>
</div>
1
2
3
4
5
6
7

2.css代码

.progressWrap{
	width:200px;//指定一个宽度
}
em.progress {
  display: inline-block;
  width: 100%;
  vertical-align: middle;
  position: relative;
  height: 30px;
  line-height: 30px;
  box-shadow: #5daf34 0 0 10px inset;
  border-radius: 5px;
  text-align: center;
  overflow: hidden;
  background: transparent;
  border: 1px solid #5daf34;
}

  em.progress span {
      position: relative;
      z-index: 9;
      font-size: 18px
  }

  em.progress i {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      z-index: 0;
      
  }

      em.progress i span {
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          background-color: #453427;
          z-index: 0;
          animation: guodu 10s infinite;
          background: -moz-linear-gradient(left, rgba(93,175,52,0) 0%, #5daf34 100%);
          background: -webkit-linear-gradient(left, rgba(93,175,52,0) 0%,#5daf34 100%);
          background: linear-gradient(to right, rgba(93,175,52,0) 0%,#5daf34 100%);
          filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00004bff', endColorstr='#004bff',GradientType=1 );
      }

      em.progress i.max span {
          background: linear-gradient(to right, rgba(93,175,52,0) 0%,#5daf34 100%);
      }

@@keyframes guodu {
  0% {
      width: 0%;
  }

  50% {
      width: 100%;
  }

  100% {
      width: 100%;
  }
}
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
59
60
61
62
63
64

3.js代码

给进度条赋值

lineCommon('progress_box', 20);//将进度条设置成20%的进度
1

lineCommon方法如下：

lineCommon(name, data) {
    data > 100 ? data = 100 : ""
    if (data == 100) {
        $('.' + name).find("i").addClass("max")
    }
    $('.' + name).find("i").css("width", data + "%").attr("key", data)
},
1
2
3
4
5
6
7

完成！！！多多积累，多多收获！