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

以下是一段实现页面顶部加载进度条的代码：

HTML：

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

CSS：

#loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #4285f4;
  z-index: 9999;
  transition: width 0.2s ease-out;
}

JavaScript：

window.addEventListener('load', function() {
  var loadingBar = document.getElementById('loading-bar');
  loadingBar.style.width = '100%';
  setTimeout(function() {
    loadingBar.style.display = 'none';
  }, 500);
});

这段代码中，我们首先在页面顶部添加了一个 <div> 元素，用于显示加载进度条。这个元素的样式设置了宽度、高度、背景颜色等属性，并使用了 CSS 过渡效果来实现进度条的动画效果。

在 JavaScript 中，我们在页面加载完成后，通过获取进度条元素并将其宽度设置为 100% 来显示进度条。接着，我们使用 setTimeout() 函数来在 500 毫秒后隐藏进度条元素，以达到进度条消失的效果。