<p class=＂intro_p＂>純CSS實現的網頁LOADING進度條，比較漂亮，可以加入到你的LO_瀏覽器特效

純CSS實現的網頁LOADING進度條，比較漂亮，可以加入到你的LOADING程序中，很直觀，很好看。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" mrc="text/html; charset=utf-8" />
<title>CSS進度條</title>
</meta>

h1{
	font-size:180%;
	font-weight:normal;
	color:#555;
}

dl, dt, dd{margin:0;padding:0;}

dd{
	width:216px;
	height:41px;
	1122123<img src=http://p1.mb5u.com/texiao/8/20100522231754341.gif>2244234background:url(http://p1.mb5u.com/texiao/8/20100522231754341.gif) no-repeat 0 0;
	position:relative;
}
dd span{
	position:absolute;
	display:block;
	width:200px;
	height:25px;
	1122123<img src=http://p1.mb5u.com/texiao/8/20100522231754342.gif>2244234background:url(http://p1.mb5u.com/texiao/8/20100522231754342.gif) no-repeat 0 0;
	top:8px;
	left:8px;
	overflow:hidden;
	text-indent:-8000px;
}
dd em{
	position:absolute;
	display:block;
	width:200px;
	height:25px;
	1122123<img src=http://p1.mb5u.com/texiao/8/20100522231754343.gif>2244234background:url(http://p1.mb5u.com/texiao/8/20100522231754343.gif) repeat-x;
	top:0;
}

.progressBar{
	width:216px;
	height:41px;
	1122123<img src=http://p1.mb5u.com/texiao/8/20100522231754341.gif>2244234background:url(http://p1.mb5u.com/texiao/8/20100522231754341.gif) no-repeat 0 0;
	position:relative;
}
.progressBar span{
	position:absolute;
	display:block;
	width:200px;
	height:25px;
	1122123<img src=http://p1.mb5u.com/texiao/8/20100522231754342.gif>2244234background:url(http://p1.mb5u.com/texiao/8/20100522231754342.gif) no-repeat 0 0;
	top:8px;
	left:8px;
	overflow:hidden;
	text-indent:-8000px;
}
.progressBar em{
	position:absolute;
	display:block;
	width:200px;
	height:25px;
	1122123<img src=http://p1.mb5u.com/texiao/8/20100522231754343.gif>2244234background:url(http://p1.mb5u.com/texiao/8/20100522231754343.gif) repeat-x 0 0;
	top:0;
}

</style>
</head>
<body>

<h1>Pure CSS progress bar</h1>
	<h2>Facts</h2>
	<p><em>Using definition list</em></p>
	<dl>
		<dt>Ability to Annoy People</dt>
		<dd>
			<span><em style="left:160px">80%</em></span>
		</dd>
		<dt>Food Shortage Tolerance</dt>
		<dd>
			<span><em style="left:20px">10%</em></span>
		</dd>	
		<dt>Karaoke Singing Skills</dt>
		<dd>
			<span><em style="left:100px">50%</em></span>
		</dd>				
	</dl>
	
	<p>Instead of list you can use any block level element.</p> 
	<p class="progressBar"><span><em style="left:50px">25%</em></span></p>
	<p>Pure Css Progress Bar is brought to you by <a href="/" title="web standards magazine and css news">mb5u.com</a></p>
</body>
</html>

所屬頻道：瀏覽器特效/更新時間：2013-05-30

[收藏][報錯][返回列表]

相關瀏覽器特效：

<p class=＂intro_p＂>純CSS實現的網頁LOADING進度條，比較漂亮，可以加入到你的LO_瀏覽器特效

瀏覽器特效Rss訂閱特效代碼搜索

瀏覽器特效推薦

猜你也喜歡看這些