DIY进度条打造数据可视化最佳拍档

2023-11-02 09:38:49

进度条是一种用来表示任务完成程度的图形化工具，在网页设计中，进度条通常用于显示文件下载、页面加载或其他需要等待的进程的完成情况。进度条可以帮助用户了解当前任务的进展，从而减少焦虑感并提高用户体验。

DIY进度条

长条进度条

长条进度条是最常见的进度条类型，由一个水平或垂直的条状图形组成，条状图形的长度表示任务的完成程度。长条进度条可以很容易地使用HTML和CSS来实现。

<div class="progress-bar">
  <div class="progress-bar-fill"></div>
</div>

.progress-bar {
  width: 300px;
  height: 20px;
  background-color: #ccc;
  border-radius: 10px;
}

.progress-bar-fill {
  width: 0%;
  height: 100%;
  background-color: #4caf50;
  border-radius: 10px;
  animation: fill 5s ease-in-out;
}

@keyframes fill {
  from {
    width: 0%;
  }

  to {
    width: 100%;
  }
}

上面的代码将创建一个长条进度条，进度条的宽度为300px，高度为20px，背景颜色为浅灰色，边框半径为10px。进度条的填充部分宽度为0%，高度为100%，背景颜色为绿色，边框半径为10px。填充部分的宽度将通过CSS动画从0%逐渐增加到100%，动画持续时间为5秒，缓动函数为ease-in-out。

环形进度条

环形进度条是一种以圆形或半圆形的方式来表示任务完成程度的进度条。环形进度条可以很容易地使用HTML和SVG来实现。

<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" stroke="#ccc" stroke-width="10" fill="none" />
  <circle cx="50" cy="50" r="40" stroke="#4caf50" stroke-width="10" fill="none" stroke-dasharray="251.2 251.2" transform="rotate(-90 50 50)" />
</svg>