写一段js在页面顶部显示一条红色的加载进度条要求有流畅的加载动效全部使用js来写

首先，需要在HTML文件中添加一个固定在页面顶部的div元素，作为进度条容器。给这个div元素设置CSS样式，使之显示为红色、高度为3px，并设置初始宽度为0。代码如下：

HTML:

<div id="progress-bar"></div>

CSS:

#progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background-color: red;
  width: 0;
  z-index: 9999;
  transition: width 0.3s ease-in-out;
}

接下来，需要编写JS代码来实现进度条的动画效果。具体实现方法是，通过监听window对象的load事件和scroll事件，分别计算页面已经加载的进度和滚动条的垂直位置，然后将这两个值相加，得到最终的进度值，将其赋值给进度条的宽度属性即可。代码如下：

JS:

window.addEventListener('load', function() {
  var progressBar = document.getElementById('progress-bar');
  var max = document.body.scrollHeight - window.innerHeight;
  var progress = (window.pageYOffset / max) * 100;
  progressBar.style.width = progress + '%';
});

window.addEventListener('scroll', function() {
  var progressBar = document.getElementById('progress-bar');
  var max = document.body.scrollHeight - window.innerHeight;
  var progress = (window.pageYOffset / max) * 100;
  progressBar.style.width = progress + '%';
});

以上代码实现了一个简单的进度条动画效果，当页面加载完成或滚动时，进度条的宽度会根据页面的加载进度和滚动条的位置动态变化。通过CSS的transition属性，可以使进度条的宽度变化具有流畅的动效。