html 一条线两种颜色,HTML5/CSS3超酷进度条 不同进度多种颜色

本文作者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