本文作者html5tricks,转载请注明出处
这是一款线条状的
下面我们来看看实现这款进度条的过程和源码,代码主要由HTML、CSS以及jQuery组成,实现过程也相对比较简单。
HTML代码:
0
这里定义了进度条的容器,以及进度百分比。
CSS代码:
.loader-container {
height: 6px;
width: 600px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -3px;
margin-left: -300px;
background-color: transparent;
background-image: -webkit-linear-gradient(left, #5bd8ff, #ff0000);
background-image: -moz-linear-gradient(left, #5bd8ff, #ff0000);
background-image: -o-linear-gradient(left, #5bd8ff, #ff0000);
b