網頁Loading載入效果 Web page loading effect
新增網頁在loading時的動畫效果
Add animation effect to the web page when loading
前端如果有大量元素要載入的時候，為了呈現畫面的美觀，通常都會有一個 Loading 的畫面
When the front end has a lot of elements to load, there is usually a loading screen to show the beauty of the interface.
先前加入這個效果本來是要解決 Js 載入網站有延遲，導致跑版的問題，不過修改一個 Class 之後就解決了
Previously, this effect was added to solve the problem of Js loading the website with delay, causing the layout to be messed up, but it was solved after modifying a class.
可是既然已經找到相關的製作方式，何不套用在網站中呢 ～
But since I have found the relevant production method, why not apply it to the website?
另外設定 Timeout 的原因就是在頻繁切換網頁的時候，如果網頁載入沒有延遲，loading 畫面會一閃而過，不太美觀。
Another reason for setting the timeout is that when switching pages frequently, if the website loads without delay, the loading screen will flash by, which is not very beautiful.
此次參考的網頁
- Loading 相關的程式碼
- 讓程式自訂 Timeout 時間
- 更多loading效果資源
程式碼部分
Code part
Head 加入以下 style
Add the following style to Header
/* 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 加入以下項目
Add the following items to the body
加入 loading 的 div 區塊
Add a div block for loading
❗用 div 包住你的網頁內容❗
Wrap your webpage content with a div.
body 的最後使用此段程式碼，有兩種版本可以使用
Use this code at the end of the body. There are two versions available.
(網頁必須載入 jQuery，The webpage must load jQuery.)
setTimeout(function () {
$(document).ready(function () {
document.getElementById("loader").style.display = "none";
document.getElementById("myDiv").style.display = "block";
});
}, 500);
</script>
window.onload = function() {
setTimeout(function () {
document.getElementById("loader").style.display = "none";
document.getElementById("myDiv").style.display = "block";
}, 500);
};
</script>
CSS 設置說明：
- #loader：設置 loader 樣式，使其居中並具有旋轉動畫。
- @keyframes spin：定義旋轉動畫。
- .animate-bottom：設置內容顯示時的動畫效果。
- @keyframes animatebottom：定義內容顯示動畫的具體效果。
＊英文使用 Bing AI 直接中翻英，測試看看它的功能
#loading效果#網頁loading#html loading#js loading
留言
張貼留言