顶部进度条是指在网页顶部显示的一个进度条，用于表示当前页面的加载进度。实现顶部进度条可以使用 CSS3 中的 transition 和 transform 属性，结合 JavaScript 中的事件监听来控制进度条的显示和隐藏。
// HTML
<div class="progress-bar"></div>
// CSS
.progress-bar {
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 3px;
background-color: #0078d7;
z-index: 9999;
transition: width 0.5s ease-in-out;
}
// JavaScript
window.addEventListener('load', function() {
document.querySelector('.progress-bar').style.width = '100%';
setTimeout(function() {
document.querySelector('.progress-bar').style.display = 'none';
}, 500);
});
加载动画是指在页面加载过程中显示的一些动画效果，用于提示用户网页正在加载中。实现加载动画可以使用 CSS3 中的 animation 属性来创建动画效果。
// HTML
<div class="loading">
<div class="loading-icon"></div>
</div>
// CSS
.loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
animation: loading 1s infinite;
}
.loading-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
border-radius: 50%;
border: 5px solid #fff;
border-top-color: #0078d7;
animation: loading-icon 1s infinite;
}
@keyframes loading {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes loading-icon {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
// JavaScript
window.addEventListener('load', function() {
document.querySelector('.loading').style.display = 'none';
});