如何在从Firebase实时数据库加载数据时添加进度条？

<div id="progressBarContainer">
  <div id="progressBar"></div>
</div>

#progressBarContainer {
  width: 100%;
  height: 20px;
  background-color: #f2f2f2;
  border-radius: 10px;
}

#progressBar {
  width: 0%;
  height: 100%;
  background-color: #4caf50;
  border-radius: 10px;
  transition: width 0.5s ease;
}

// 获取进度条元素
var progressBar = document.getElementById('progressBar');

// 显示进度条并设置初始进度为0%
progressBar.style.width = '0%';
progressBar.style.display = 'block';

// 监听数据加载进度
firebase.database().ref('data').on('value', function(snapshot) {
  var loadedData = snapshot.val();

  // 根据加载的数据量计算进度
  var progress = (loadedData.length / totalDataLength) * 100;

  // 更新进度条显示
  progressBar.style.width = progress + '%';

  if (progress === 100) {
    // 数据加载完成后隐藏进度条
    progressBar.style.display = 'none';
  }
});