前端写一段代码要求能够在页面顶部显示加载进度条要求这些加载都有动效

以下是一个简单的代码示例，使用jQuery和CSS实现页面顶部的加载进度条，有动画效果：

HTML：

<body>
  <div id="progress"></div>
  <!-- 页面内容 -->
</body>

CSS：

#progress {
  height: 3px;
  background-color: #007aff;
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  z-index: 9999;
  transition: width 0.2s ease-out;
}

JavaScript：

$(window).on('load', function() {
  $('#progress').animate({
    width: '100%'
  }, 500, function() {
    // 动画结束后隐藏进度条
    $(this).fadeOut(500);
  });
});

这个代码段使用jQuery监听页面加载事件，当页面加载完成后，使用CSS动画实现进度条的宽度从0到100%的渐变效果，动画时间为0.5秒。动画结束后，使用fadeOut()函数隐藏进度条。