小志个人博客

今天在一个QQ群中看到有人在问一个进度条的实现方式，当时因为工作时间，需求相对也比较紧，只是简单的说了一下可以通过CSS的边框属性和背景属性来完成。不过或许是因为当时说的内容比较少吧，那位朋友似乎没有明白我想要表达的意思。也罢，快过年了，晚上回来的时间相对也可以早点，抽点时间简单写一个demo，顺便再说说自己的一个思路想法吧。

在这里先祝大家虎年吉祥！

对于简单的、纯色的进度条，我一直比较热衷于直接用CSS来实现，复杂点的当然是涉及到图片啦。那么对于简单的、纯色的进度条需要怎么利用CSS的边框属性和背景属性来完成呢？

其实这个实现方式并不是很困难，考虑这个进度条的实现呢，我的思路主要是这样的：

1. 进度条的长度改变肯定是通过JS或者其他程序语言来控制，而xhtml仅仅只页面表现
2. 既然是通过JS或者其他程序语言控制进度条的长度，那么就可以直接利用xhtml的style属性来改变进度条的长度
3. 通过xhtml的style属性来完成进度条的长度改变，那么也就可以改变边框的长度
4. 那么宽度可以改变，就可以利用背景色来完成进度条的长度；边框可以改变的话，就可以利用边框色来实现进度条长度的改变

有了这样的一个思路之后，那么就需要开始实践，只有实践后才会晓得一个思路、一个想法是否能最终得到你所想要的内容。

1
2
3

<div class="loadbar_01">
	<span style="width:80%;">8.0</span>
</div>

这个结构是我相对比较喜欢的一个结构，通过这个结构只需要改变span标签中的width属性就可以利用背景颜色来实现进度条的实现。

1
2

div.loadbar_01 {width:200px;height:20px;overflow:hidden;background-color:#EEEEEE;}
div.loadbar_01 span {float:left;height:20px;text-indent:8px;font:normal 10px/20px Arial, Verdana,Lucida, Helvetica, sans-serif;color:#FFFBCE;background-color:#59A9F2;}

然后我们再看一个通过边框属性来实现进度条的方式，这个方法如果有两层背景色就需要多嵌套一个div，相对而言不是非常喜欢，而如果仅仅只有一个进度条的前景色（也就是只有一种颜色的时候）我还是比较喜欢的。

1
2
3
4
5

<div class="loadbar_02">
	<div style="border-left-width:60px;">
		<span>3.0</span>
	</div>
</div>

这样多嵌套了一层div标签后，然后再通过JS来完成第二个div标签的边框宽度值的改变，那么就可以得到最终我们所想要的进度条效果。

1
2
3

div.loadbar_02 {position:relative;width:200px;overflow:hidden;}
div.loadbar_02 div {height:20px;color:#FFFBCE;border-left:1px solid #59A9F2;background-color:#EEEEEE;}
div.loadbar_02 span {position:absolute;top:0;left:8px;height:20px;font:normal 10px/20px Arial, Verdana,Lucida, Helvetica, sans-serif;}

其中我们会在demo中看到进度条上面是有文字的，这个其实并不是重点，因为处理这个文字我们可以用定位、浮动等属性来实现。具体的大家可以仔细看一下demo，也可以通过firebug来改变相应的属性值，观察进度条的变化。

题外话：写完这篇日志，我突然发现自己已经不适合写教程了，文字随心所欲，想到什i么就写什么，无法把整体的思路结合在一起，还是喜欢讨论形式的交流。顺带广告一下，欢迎大家加入CSS那些事儿的QQ群讨论CSS，群号：82991297