css制作网格进度条

使用CSS Grid布局创建网格进度条

通过CSS Grid可以轻松实现网格化的进度条效果。以下是一个基础实现方式：

.progress-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
  width: 300px;
}

.grid-item {
  height: 20px;
  background-color: #e0e0e0;
  border-radius: 2px;
}

.grid-item.active {
  background-color: #4CAF50;
}

<div class="progress-grid">
  <div class="grid-item active"></div>
  <div class="grid-item active"></div>
  <div class="grid-item active"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

动态控制进度百分比

使用JavaScript可以动态控制进度百分比：

function setProgress(percent) {
  const items = document.querySelectorAll('.grid-item');
  const activeCount = Math.floor(items.length * percent / 100);

  items.forEach((item, index) => {
    item.classList.toggle('active', index < activeCount);
  });
}

// 设置进度为60%
setProgress(60);

添加动画效果

为进度变化添加平滑过渡：

.grid-item {
  transition: background-color 0.3s ease;
}

响应式设计

让网格进度条适应不同屏幕尺寸：

.progress-grid {
  width: 100%;
  max-width: 500px;
}

自定义样式选项

扩展更多样式选项：

.grid-item.warning {
  background-color: #FFC107;
}

.grid-item.error {
  background-color: #F44336;
}

垂直方向网格进度条

创建垂直方向的变体：

.vertical-progress {
  grid-template-columns: 1fr;
  grid-template-rows: repeat(10, 1fr);
  height: 200px;
}

这些方法提供了创建网格进度条的基本框架，可以根据具体需求调整网格数量、颜色和尺寸等参数。