当然,以下是一个简单的纯HTML进度条示例:
<!DOCTYPE html>
<html>
<head>
<title>纯HTML进度条</title>
<style>
.progress-bar {
width: 100%;
background-color: #f3f3f3;
border-radius: 13px;
}
.progress-bar-fill {
height: 20px;
background-color: #4caf50;
width: 50%; /* 调整这个百分比以改变进度 */
text-align: center;
color: white;
line-height: 20px; /* 使文本垂直居中 */
border-radius: 13px;
}
</style>
</head>
<body>
<div class="progress-bar">
<div class="progress-bar-fill">
50% <!-- 这里显示进度百分比,可以根据需要调整 -->
</div>
</div>
</body>
</html>
这个示例中,.progress-bar
是进度条的外框,.progress-bar-fill
是填充部分。你可以通过调整 .progress-bar-fill
的 width
属性来改变进度。同时,你也可以在 .progress-bar-fill
中添加文本以显示当前的进度百分比。