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

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

具体代码如下：

1.html代码

<div class="progressWrap"><em class="progress progress_box" style="margin:10px 0"><i><span></span></i></em>
</div>

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%;}
}

3.js代码

给进度条赋值

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

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)
},

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