網頁Loading載入效果

網頁Loading載入效果

- 1月 13, 2020

新增網頁在loading時的動畫效果

前端如果有大量元素要載入的時候，為了呈現畫面的美觀，通常都會有一個 Loading 的畫面

先前加入這個效果本來是要解決 Js 載入網站有延遲，導致跑版的問題，不過修改一個 Class 之後就解決了

可是既然已經找到相關的製作方式，何不套用在網站中呢~

另外設定 Timeout 的原因就是在頻繁切換網頁的時候，如果網頁載入沒有延遲，loading 畫面會一閃而過，不太美觀。

此次參考的網頁

Loading 相關的程式碼
讓程式自訂 Timeout 時間
- https://www.runoob.com/jsref/met-win-settimeout.html
更多loading效果資源
- https://codepen.io

程式碼部分

Head 加入以下 style

<style>
/* Center the loader */
#loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 160px;
height: 160px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}

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

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

/* Add animation to "page content" */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1.5s
}

@-webkit-keyframes animatebottom {
from { bottom:-100px; opacity:0 }
to { bottom:0px; opacity:1 }
}

@keyframes animatebottom {
from{ bottom:-100px; opacity:0 }
to{ bottom:0; opacity:1 }
}

#myDiv {
display: none;
}
</style>

在 body 加入以下項目

<body style="margin:0;"><body>

加入 loading 的 div 區塊

<div id="loader"></div>

用 div 包住內容

<div style="display:none;" id="myDiv" class="animate-bottom"><div>

body 的最後使用此段程式碼

<script>
setTimeout(function () {
$(document).ready(function () {
document.getElementById("loader").style.display = "none";
document.getElementById("myDiv").style.display = "block";
});
}, 500);
</script>

#loading效果#網頁loading

留言