js实现一个模拟页面加载过程的动画效果

以下是一个简单的示例代码，可以模拟页面加载过程的动画效果：

html

.loader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}

.loader .spinner {
width: 40px;
height: 40px;
border-radius: 50%;
border: 4px solid #333;
border-top-color: #ccc;
animation: spin 1s infinite ease-in-out;
}

@keyframes spin {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}

// Simulate page loading process
setTimeout(() => {
document.querySelector('.loader').style.display = 'none';
}, 3000);

在上面的示例代码中，我们创建了一个具有旋转动画效果的加载器。当页面加载时，加载器会显示在页面中央。通过 setTimeout 函数来模拟页面加载的过程，当加载完成后，加载器会隐藏。你可以在加载器的样式中进行调整，以满足你的需求。