底部边框中的部分颜色以显示进度条

基础概念

进度条是一种图形用户界面元素，用于表示任务的完成进度。它可以显示为一个水平或垂直的条形，其中一部分被填充以表示已完成的工作量。

类型

线性进度条：最常见的形式，通常水平显示。
圆形进度条：以圆形或环形显示进度。
模糊进度条：通过模糊效果展示未完成部分。

应用场景

文件上传/下载：显示传输进度。
数据加载：如网页内容或应用内数据的加载。
任务执行：长时间运行的任务的进度跟踪。

示例代码（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 {
    width: 100%;
    background-color: #ddd;
  }
  .progress {
    width: 50%; /* Adjust this value to change the progress */
    height: 30px;
    background-color: #4CAF50;
    text-align: center;
    line-height: 30px;
    color: white;
  }
</style>
</head>
<body>

<div class="progress-bar">
  <div class="progress" id="myProgress">50%</div>
</div>

<script>
function move() {
  var elem = document.getElementById("myProgress");   
  var width = 0;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
      elem.innerHTML = width + '%';
    }
  }
}
move();
</script>

</body>
</html>