css制作网格进度条

使用 CSS Grid 制作网格进度条

CSS Grid 是一种强大的布局工具，可以用来创建网格进度条。以下是实现方法：

HTML 结构

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

CSS 样式

.progress-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4列网格 */
  gap: 5px; /* 网格间距 */
  width: 200px;
}

.grid-item {
  height: 20px;
  background-color: #e0e0e0; /* 默认未激活颜色 */
  border-radius: 3px;
}

.grid-item.active {
  background-color: #4CAF50; /* 激活状态颜色 */
}

使用 Flexbox 制作网格进度条

Flexbox 是另一种实现网格进度条的简单方法：

HTML 结构

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

CSS 样式

.flex-progress {
  display: flex;
  gap: 5px;
  width: 200px;
}

.flex-item {
  flex: 1;
  height: 20px;
  background-color: #e0e0e0;
  border-radius: 3px;
}

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

动态更新进度条

通过 JavaScript 可以动态更新进度条的进度：

// 获取所有网格项
const gridItems = document.querySelectorAll('.grid-item');

// 更新进度到 75%
function updateProgress(percent) {
  const activeCount = Math.floor(percent / 100 * gridItems.length);

  gridItems.forEach((item, index) => {
    if (index < activeCount) {
      item.classList.add('active');
    } else {
      item.classList.remove('active');
    }
  });
}

// 调用示例
updateProgress(75);

自定义网格进度条样式

可以进一步自定义网格进度条的样式：

/* 圆角样式 */
.grid-item {
  border-radius: 50%;
}

/* 渐变颜色 */
.grid-item.active {
  background: linear-gradient(to right, #4CAF50, #8BC34A);
}

/* 悬停效果 */
.grid-item:hover {
  transform: scale(1.1);
  transition: transform 0.2s;
}

响应式网格进度条

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

.progress-grid {
  grid-template-columns: repeat(auto-fit, minmax(20px, 1fr));
}

这些方法提供了创建网格进度条的不同方式，可以根据具体需求选择最适合的方案。