CSS网页进度条

2020-01-27 13:47:45

字体：大中小

来源：转载

供稿：网友

纯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让鼠标控制滚屏

下一篇：分别用JavaScript、VBScript弹出确认提示框

学习交流

phpwind的rewrite重写原理

phpwind的rewrite重写原理...

热门图片

猜你喜欢的新闻

猜你喜欢的关注