នៅពេលយើងយើងទាញទិន្ន័យចេញពី API ឬ Server ប្រសិនបើទិន្ន័យវាមានច្រើននោះគឺមិនឃើញអ្វីទេនៅគំឡុងពេលរងចាំ ដូច្នេះយើងធ្វើ loading ឲ្យវានៅកំឡុងពេលរងចាំទិន្ន័យមក។
CSS
css ដាក់ផ្ទាំងខ្មៅ
.popup{
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.184);
position: fixed;
top: 0;
left: 0;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Loading</title>
</head>
<body>
<div>
<ul>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
</ul>
</div>
<div class="popup">
1
</div>
</body>
</html>
បន្ថែមផ្ទាំង loading
<body>
<div>
<ul>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
</ul>
</div>
<div class="popup">
<div class="loading">
Loading....
</div>
</div>
</body>
CSS
.popup{
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.184);
position: fixed;
top: 0;
left: 0;
}
.loading{
width: 300px;
height: 130px;
background-color: white;
border-radius: 8px;
font-size: 18px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);/* add more position top, left*/
/*Make to center and middle*/
display: flex;
justify-content: center;
align-items: center;
}
JavaScript
បន្ទាប់ពីយើងរចនាវារួចហើយ យើងមិនប្រើវានៅក្នុង html ទេដោយយើងប្រើវានៅក្នុង JavaScript ដូចន្នេះបង្កើតនៅក្នុង javaScript
</head>
<body>
<div id="data-view">
<ul>
<li></li>
</ul>
</div>
<!-- <div class="popup">
<div class="loading">
Loading....
</div>
</div> -->
</body>
<script src="js.js"></script>
</html>
JavaScript
const body = document.body
const popup = document.createElement("div")
const loading = document.createElement("div")
loading.innerHTML = "Loading..."
popup.classList.add("popup")// ចាប់យក style css មកដក់
loading.classList.add("loading")
body.appendChild(popup)//បោះ ClassCss <div class"popup"> ទៅឲ្យ body
popup.appendChild(loading)
យើងបង្កើត function សម្រាប់ហៅវាទៅប្រើនៅក្នុង function ផ្សេងទៀត
const body = document.body
const popup = document.createElement("div")
const loading = document.createElement("div")
function myLoading(){
loading.innerHTML = "Loading..."
popup.classList.add("popup")// ចាប់យក style css មកដក់
loading.classList.add("loading")
body.appendChild(popup)//បោះ ClassCss <div class"popup"> ទៅឲ្យ body
popup.appendChild(loading)
}
fetchData()
async function fetchData(){
myLoading()
const URL = 'https://script.google.com/macros/s/AKfycby7KqBj0W_cWLfiFfHZe6rxNFbHKUCtJJQCWEMUyDTBzpKeKGGlxO7b5xIYYslSAyhj/exec'
const res = await fetch(URL)
const data = await res.json()
tranferData(data.DATA)
}
var arrData = ""
function tranferData(data){
arrData = data
displayData(arrData)
}
function displayData(data){
let word = ""
for(d of data){
word +=`<li>${d.KHMER}</li>`
}
document.getElementById("data-view").children[0].innerHTML = word
//MARK: remove class popup after load data
document.querySelector(".popup").remove()
}
0 Comments