css实现小方块进度条
CSS可以用来创建一个简单的小方块进度条。以下是一个示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Progress Bar</title>
<style>
.progress-container {
width: 100%;
background-color: #eee;
border-radius: 10px;
overflow: hidden; /* 确保进度条里的元素不会溢出 */
}
.progress-bar {
height: 30px;
width: 0%; /* 默认情况下进度为0 */
background-color: #4CAF50;
border-radius: 10px;
transition: width 1s ease-in-out; /* 进度条变化动画 */
}
.progress-text {
float: left;
color: #f2f2f2;
font-size: 16px;
padding: 5px 0px;
width: 100%;
text-align: center;
background-color: #4CAF50;
border-radius: 10px;
margin-top: 2px;
}
</style>
</head>
<body>
<div class="progress-container">
<div class="progress-bar" style="width: 75%;"></div> <!-- 可以修改这里的宽度来表示进度 -->
<div class="progress-text">75%</div>
</div>
</body>
</html>在这个例子中，.progress-container 是外框，.progress-bar 是实际的进度条，.progress-text 是显示进度百分比的文本。你可以通过修改.progress-bar的width属性来改变进度条的进度，例如将宽度设置为75%来表示进度已完成75%。
评论已关闭