CSS網頁進度條

2024-09-05 12:17:36

字體：大中小

來源：轉載

供稿：網友

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

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>CSS進度條</title><style>body {	margin:0;	padding:40px;	background:#fff;	font:70% Arial, Helvetica, sans-serif;	color:#555;	line-height:180%;}h1{	font-size:180%;	font-weight:normal;	color:#555;}dl, dt, dd{margin:0;padding:0;}dd{	width:216px;	height:41px;	background:url(/jscss/demoimg/200903/bg_bar.gif) no-repeat 0 0;	position:relative;}dd span{	position:absolute;	display:block;	width:200px;	height:25px;	background:url(/jscss/demoimg/200903/bar.gif) no-repeat 0 0;	top:8px;	left:8px;	overflow:hidden;	text-indent:-8000px;}dd em{	position:absolute;	display:block;	width:200px;	height:25px;	background:url(/jscss/demoimg/200903/bg_cover.gif) repeat-x;	top:0;}.progressBar{	width:216px;	height:41px;	background:url(/jscss/demoimg/200903/bg_bar.gif) no-repeat 0 0;	position:relative;}.progressBar span{	position:absolute;	display:block;	width:200px;	height:25px;	background:url(/jscss/demoimg/200903/bar.gif) no-repeat 0 0;	top:8px;	left:8px;	overflow:hidden;	text-indent:-8000px;}.progressBar em{	position:absolute;	display:block;	width:200px;	height:25px;	background:url(/jscss/demoimg/200903/bg_cover.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></body></html>

上一篇：分別用JavaScript、VBScript彈出確認提示框

下一篇：JavaScript讓鼠標控制滾屏