用js 写一个加载动画
时间: 2024-05-14 07:12:40 浏览: 139
以下是一个简单的加载动画示例,它使用 HTML、CSS 和 JavaScript 实现。当页面加载时,它会显示一个旋转的 loading 图标,直到页面完全加载完成。
HTML 代码:
```
<div id="loading">
<div class="spinner"></div>
</div>
```
CSS 代码:
```
#loading {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
background-color: rgba(255, 255, 255, 0.8);
}
.spinner {
width: 50px;
height: 50px;
border-radius: 50%;
border: 3px solid #eaeaea;
border-top-color: #3498db;
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
```
JavaScript 代码:
```
window.addEventListener("load", function(){
const loader = document.getElementById("loading");
setTimeout(function(){
loader.style.opacity = "0";
setTimeout(function(){
loader.style.display = "none";
}, 500);
}, 1000);
});
```
在页面加载时,JavaScript 代码将等待页面完全加载完成。然后,它会隐藏加载动画,并将其从 DOM 中删除。可以通过调整 JavaScript 代码中的时间间隔来控制加载动画的持续时间。
阅读全文
相关推荐
















