纯CSS3实现加载进度条动画：红色条形进度条

<div id='loading-bar'></div>
<style>
#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%;}
}
</style>
<script>
window.onload = function() {
    var loadingBar = document.getElementById('loading-bar');
    loadingBar.style.display = 'block';
};
</script>
<p>这段代码会在页面加载完成后显示一个红色的进度条，进度条会从0%到100%循环动画。可以根据需要修改进度条的高度、颜色、动画时间等属性。</p>