在頁面未加載完之前顯示loading動畫
loading動畫代碼demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>use-pseudo-class</title>
<style>
.loading{
width: 100px;
height: 100px;
border: 1px solid red;
position: relative;
}
.loading::before,.loading::after{
content: '';
/*這里要加一個content,不然什么都沒有*/
position: absolute;
width: 10px;
height: 10px;
background: #000;
border-radius: 50%;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
animation: toBig 1.5s linear infinite;
}
.loading::after{
animation-delay: 0.75s;
/*background-color: red;*/
}
@keyframes toBig {
0%{
width: 0;
height: 0;
opacity: 1;
}
100%{
width: 50px;
height:50px;
opacity: 0;
}
}
</style>
</head>
<body>
<div class="loading">
</div>
</body>
</html>加入到實際頁面的使用方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>loading動畫</title>
<!--loading style-->
<style>
.loading{
width: 100px;
height: 100px;
/*border: 1px solid red;*/
position: relative;
}
.loading::before,.loading::after{
content: '';
/*這里要加一個content,不然什么都沒有*/
position: absolute;
width: 0;
height: 0;
background: #000;
border-radius: 50%;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
animation: toBig 1s linear infinite;
}
.loading::after{
animation-delay: 0.5s;
/*background-color: red;*/
}
@keyframes toBig {
0%{
width: 0;
height: 0;
opacity: 1;
}
100%{
width: 50px;
height:50px;
opacity: 0;
}
}
</style>
<style>
.site-welcome{
display: none;
justify-content:center;
align-items:center;
/*里面內容居中使用flex在父元素添加三行代碼display:flex;justify-content:center;
align-items:center;*/
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*上面四行代碼,讓這個fixed鋪滿整個畫面*/
background-color: #ccc;
z-index: 1;
}
.site-welcome.active{
display:flex;
}
</style>
</head>
<body>
<div class="site-welcome active" id="siteWelcome">
<div class="loading">
</div>
</div>
//.
//.
//.
//這里是其他代碼
<script>
//當代碼加載到這里的時候,執行這個script,當代碼加載到這里,說明loading該結束了
window.onload=function(){
var siteWelcome = document.getElementById('siteWelcome');
siteWelcome.classList.remove('active');
}
</script>
</body>
</html>本文轉載於:猿2048➮https://www.mk2048.com/blog/blog.php?id=hcj112010kj