纯JS实现页面顶部红色加载进度条动效

这段代码使用 JavaScript 创建一个红色的进度条元素，并将其添加到页面顶部。然后使用定时器来实现加载动效，每秒增加进度条的宽度，直到达到 100%。最后加载完成后隐藏进度条。

// 创建进度条元素
var progress = document.createElement('div');
progress.style.width = '0%';
progress.style.height = '5px';
progress.style.backgroundColor = 'red';
progress.style.position = 'fixed';
progress.style.top = '0';
progress.style.left = '0';
progress.style.zIndex = '9999';
document.body.appendChild(progress);

// 加载动效
var progressInterval = setInterval(function() {
  if (parseInt(progress.style.width) < 100) {
    progress.style.width = parseInt(progress.style.width) + 5 + '%';
  } else {
    clearInterval(progressInterval);
    // 加载完成后隐藏进度条
    progress.style.display = 'none';
  }
}, 1000);

这段代码简洁实用，能够轻松实现页面顶部红色加载进度条动效，方便用户直观地了解页面加载进度。