通过HTML/CSS 实现各类进度条的功能。
以下是一个简单的HTML和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 Example</title>
<style>
.progress-bar-container {
width: 100%;
background-color: #eee;
border-radius: 10px;
overflow: hidden; /* To avoid child elements overflowing */
}
.progress-bar {
height: 30px;
width: 0%; /* Initial width of the progress */
background-color: #4CAF50;
border-radius: 10px;
transition: width 1s ease-in-out; /* Smooth transition effect */
text-align: center; /* Center the text inside the bar */
line-height: 30px; /* Vertically center the text */
color: white;
}
.progress-text {
float: left; /* Align text to the left */
width: 100%;
text-align: center;
color: #333;
font-size: 16px;
}
</style>
</head>
<body>
<div class="progress-bar-container">
<div class="progress-bar" style="width: 75%;">75%</div> <!-- Change the width to change the progress -->
</div>
<div class="progress-text">Progress Bar</div>
</body>
</html>这段代码展示了如何创建一个简单的水平进度条。.progress-bar-container 是进度条的容器，而 .progress-bar 是实际显示进度的元素。通过调整 .progress-bar 的 width 属性，可以控制进度条的进度。CSS中的 transition 属性用于实现进度条宽度变化时的平滑过渡效果。
评论已关闭