请使用纯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 中添加文本以显示当前的进度百分比。

posted @ 2025-01-19 10:57  王铁柱6  阅读(32)  评论(0)    收藏  举报