【JS&CSS】タスクの進捗状況を示すプログレスバーの実装方法

<div class="indeterminate-bar-container">
  <div class="indeterminate-bar"></div>
</div>

/* 不定型プログレスバーの外枠（コンテナ）のスタイル */
.indeterminate-bar-container {
  width: 100%;
  height: 20px;
  background-color: #f3f3f3;
  overflow: hidden;
  border-radius: 5px;
  position: relative;
}

/* 実際に動くバーのスタイル */
.indeterminate-bar {
  width: 100%;
  height: 100%;
  background-color: #4caf50;
  position: absolute;
  animation: indeterminate 2s infinite; /* 2秒ごとに繰り返すアニメーション（下記）を適用 */
}

/* アニメーションの定義 */
@keyframes indeterminate {
  0% {
    left: -50%; /* アニメーション開始時、バーの左端がコンテナの外側（-50%）に */
    width: 50%;
  }
  50% {
    left: 25%; /* アニメーションの途中でバーが中央付近に移動 */
    width: 50%;
  }
  100% {
    left: 100%; /* 最後にバーがコンテナの右端の外側に移動 */
    width: 50%;
  }
}

<div class="progress-bar-container">
  <div class="progress-bar" id="progress-bar"></div>
</div>
<div class="progress-options">
  <label>
    <input type="checkbox" class="progress-check"> Task 1
  </label>
  <label>
    <input type="checkbox" class="progress-check"> Task 2
  </label>
  <label>
    <input type="checkbox" class="progress-check"> Task 3
  </label>
</div>

/* プログレスバーの外枠（コンテナ）のスタイル */
.progress-bar-container {
  width: 100%;
  height: 20px;
  background-color: #f3f3f3;
  overflow: hidden;
  border-radius: 5px;
  margin-bottom: 20px;
}

/* プログレスバー自体のスタイル */
.progress-bar {
  width: 0%;
  height: 100%;
  background-color: #4caf50;
  transition: width 0.3s ease;
}

/* チェックボックス（タスク）のスタイル */
.progress-options {
  display: flex;
  justify-content: center;
  gap: 20px;
}

const checkboxes = document.querySelectorAll('.progress-check');

// チェックボックスがクリックされたときの進捗バー更新処理
checkboxes.forEach(function(checkbox) {
  checkbox.addEventListener('change', updateProgress);
});

function updateProgress() {
  const totalCheckboxes = document.querySelectorAll('.progress-check').length; // 全チェックボックスの数
  const checkedCount = document.querySelectorAll('.progress-check:checked').length; // チェックされている数
  const progressBar = document.querySelector('#progress-bar');
  
  // 全チェックボックスに対してチェックされている割合を計算
  const progress = (checkedCount / totalCheckboxes) * 100;
  
  // プログレスバーの幅を更新
  progressBar.style.width = progress + '%';
}