如何在加载listview前显示加载栏？

<div id="loading-bar"></div>
<ul id="listview"></ul>

#loading-bar {
  width: 100%;
  height: 2px;
  background-color: #ccc;
  position: fixed;
  top: 0;
  left: 0;
  display: none;
}

#listview {
  margin-top: 10px;
}

// 显示加载栏
function showLoadingBar() {
  document.getElementById("loading-bar").style.display = "block";
}

// 隐藏加载栏
function hideLoadingBar() {
  document.getElementById("loading-bar").style.display = "none";
}

// 加载listview
function loadListView() {
  showLoadingBar();

  // 模拟异步请求数据
  setTimeout(function() {
    var listview = document.getElementById("listview");
    for (var i = 1; i <= 10; i++) {
      var li = document.createElement("li");
      li.textContent = "Item " + i;
      listview.appendChild(li);
    }

    hideLoadingBar();
  }, 2000);
}

// 页面加载完成后调用loadListView函数
window.onload = loadListView;