JavaScript 实现粉色加载进度条 - 顶部显示

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

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