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

可以使用CSS3动画和JavaScript来实现一个加载进度条：

HTML代码：

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

CSS代码：

#loading-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 5px;
    background-color: red;
    animation: loading 2s infinite;
}

@keyframes loading {
    0% {width: 0%;}
    100% {width: 100%;}
}

JavaScript代码：

window.onload = function() {
    var loadingBar = document.getElementById('loading-bar');
    loadingBar.style.display = 'block';
};

这段代码会在页面加载完成后显示一个红色的进度条，进度条会从0%到100%循环动画。可以根据需要修改进度条的高度、颜色、动画时间等属性。