以下是一个简单的HTML和CSS实现的进度条示例源码:
HTML部分:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>进度条实例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="progress">
<div class="progress-bar" style="width: 50%;"></div>
</div>
</body>
</html>
CSS部分(style.css):
.progress {
width: 100%;
background-color: #f0f0f0;
}
.progress-bar {
width: 0;
height: 30px;
background-color: #007bff;
transition: width 0.8s;
}
在这个示例中,我们创建了一个简单的进度条,使用一个<div>
元素.progress
作为进度条的容器,内部包含一个进度条元素.progress-bar
。通过设置.progress-bar
的width
属性,可以控制进度条的进度。当进度条的width
属性发生变化时,通过CSS中的transition
属性可以实现平滑的过渡效果。
您可以将以上HTML和CSS代码保存为同一个文件,并在浏览器中查看效果。您还可以通过修改.progress-bar
元素的width
属性值来改变进度条的进度,从而观察不同的进度效果。此示例是一个简单的进度条实现,您可以根据需要进行样式和功能的进一步定制。