写一段js在页面顶部显示一条粉色的加载进度条

以下是一段简单的js代码，用于在页面顶部显示一条粉色的加载进度条：

// 创建一个div元素作为进度条
var progressBar = document.createElement("div");

// 设置进度条样式
progressBar.style.position = "fixed";
progressBar.style.top = "0";
progressBar.style.left = "0";
progressBar.style.width = "100%";
progressBar.style.height = "5px";
progressBar.style.backgroundColor = "pink";
progressBar.style.zIndex = "9999";
progressBar.style.transition = "width 0.5s ease-out";

// 将进度条添加到页面中
document.body.appendChild(progressBar);

// 监听页面加载事件，根据加载进度更新进度条宽度
window.addEventListener("load", function() {
  progressBar.style.width = "100%";
});

// 监听页面滚动事件，根据滚动距离更新进度条宽度
window.addEventListener("scroll", function() {
  var scrolled = window.scrollY / (document.documentElement.scrollHeight - window.innerHeight);
  progressBar.style.width = (scrolled * 100) + "%";
});

这段代码创建一个div元素作为进度条，并设置其样式。然后将其添加到页面中。通过监听页面加载事件和滚动事件，根据加载进度和滚动距离更新进度条宽度。最终实现在页面顶部显示一条粉色的加载进度条。