请使用纯HTML制作一个进度条
当然，以下是一个简单的纯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 中添加文本以显示当前的进度百分比。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· 写一个简单的SQL生成工具
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期（2025年3.1-3.9）