使用HTML+CSS实现网页loading加载效果，支持定时或加载完成后隐藏
以下是一个简单的HTML和CSS代码示例，用于创建一个自定义的页面加载效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Loading Spinner</title>
<style>
.loader-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(255, 255, 255, 0.7);
z-index: 1000;
}
.loader {
border: 5px solid #f3f3f3;
border-top: 5px solid #3498db;
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="loader-container">
<div class="loader"></div>
</div>
<script>
window.onload = function() {
setTimeout(function() {
document.querySelector('.loader-container').style.display = 'none';
}, 3000); // 延迟3秒后隐藏加载动画
};
</script>
</body>
</html>这段代码创建了一个简单的圆形加载动画，并使用CSS动画使其旋转。当页面加载完成后，JavaScript 代码会在3秒后隐藏这个加载动画容器。这个示例可以根据需要进一步定制，比如通过CSS改变加载动画的样式或颜色，或者通过JavaScript来实现更复杂的加载状态管理。
评论已关闭