CSS3制作一个简单的进度条

最新推荐文章于 2025-10-11 19:55:35 发布

原创最新推荐文章于 2025-10-11 19:55:35 发布 · 4.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS3制作进度条 #CSS3设置进度条 #H5制作进度条 #制作进度条 #CSS3进度条

小技巧专栏收录该内容

133 篇文章

订阅专栏

本文展示了一个使用CSS3制作的进度条实例。通过具体的HTML和CSS代码实现了带有百分比文本显示的进度条，背景颜色为绿色。

这里只是一个小demo,一个用CSS3写的进度条。
如图所示：

这里写图片描述

具体代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"   />
<meta name="viewport" content="initial-scale=1">
<style>
.process-bar
{
	width:100px;
	display:inline-block;
	*zoom:1;
}
.pb-wrapper
{
	border:1px solid #cfd0d2;
	position:relative;
	background:#cfd0d2;
	border-radius: 8px;
}
.pb-container
{
	height:12px;
	position:relative;
	left:-1px;
	margin-right:-2px;
	font:1px/0 arial;
	padding:1px;
}
.pb-highlight
{
	position:absolute;
	left:0;
	top:0;
	_top:1px;
	width:100%;
	opacity:0.6;
	filter:alpha(opacity=60);
	height:6px;
	background:white;
	font-size:1px;
	line-height:0;
	z-index:1
}
.pb-text
{
	width:100%;
	position:absolute;
	left:0;
	top:0;
	text-align:center;
	font:10px/12px arial;
	color:black;
	font:10px/12px arial
}
</style>
</head>
<body>
    <div class="process-bar skin-green">
		<div class="pb-wrapper">
			<div class="pb-highlight"></div>
			<div class="pb-container">
				<div class="pb-text">50%</div>
				<div class="pb-value" style="height: 100%;width: 50%;background: #19d73d;border-radius: 8px;"></div>
			</div>
		</div>
	</div>
</body>
</html>