要使用 CSS 实现页面加载进度条效果，可以使用以下步骤：
#progress-bar {
width: 0%;
height: 5px;
background-color: #29d;
position: fixed;
top: 0;
left: 0;
z-index: 10000;
transition: width 0.3s ease-in-out;
}其中，width 属性用于控制进度条的完成程度，height 属性用于设置进度条的高度，background-color 属性用于设置进度条的颜色，position 属性用于设置进度条的位置，top 和 left 属性用于设置进度条的左上角坐标，z-index 属性用于设置进度条的层叠顺序，transition 属性用于设置进度条的过渡效果。
window.addEventListener('load', function () {
var progressBar = document.querySelector('#progress-bar');
progressBar.style.width = '100%';
});其中，addEventListener 方法用于监听 window 对象的 load 事件，当页面加载完成后，会执行回调函数中的代码。在回调函数中，使用 querySelector 方法获取进度条元素，然后将其 width 属性设置为 100%，表示进度条已经完成。
#progress-bar.loading {
width: 50%;
}
#progress-bar.loading::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 50%;
background-color: rgba(255, 255, 255, 0.2);
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0% {
left: 50%;
width: 0;
}
50% {
left: 0;
width: 100%;
}
100% {
left: 0;
width: 0;
}
}其中，loading 类用于表示进度条正在加载中，::after 伪元素用于实现进度条的动画效果，content 属性用于设置 ::after 元素的内容为空，position 属性用于设置 ::after 元素的位置，top、right、bottom 和 left 属性用于设置 ::after 元素的尺寸和位置，background-color 属性用于设置 ::after 元素的背景色，animation 属性用于设置 ::after 元素的动画效果。
通过以上步骤，就可以使用 CSS 实现页面加载进度条效果了。
