깃허브 : https://github.com/OhIkmyeong/promise_finally
GitHub - OhIkmyeong/promise_finally: promise의 finally를 이용한 로딩화면
promise의 finally를 이용한 로딩화면 . Contribute to OhIkmyeong/promise_finally development by creating an account on GitHub.
github.com
promise의 then,catch,finally를 이용하여 로딩화면 제거 구현
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;}
html,body{
display:flex; justify-content:center; align-items:center;
width:100%; height:100vh;
font-size:5vw;
}
#load{
position:fixed;
top:50%;left:50%;
padding:.5em 1em;
transform:translate(-50%,-50%);
background:rgba(0,0,0,.5); color:#fff;
backdrop-filter:blur(10px);
animation: loading .5s linear infinite alternate;
transition:all 1s;
}
#load.off{
top:0;
transform:translate(-50%,-100%);
}
@keyframes loading {
to{padding:.5em .5em;}
}
</style>
</head>
<body>
<div id="load">LOADING</div>
<div id="result">3초 뒤에 내용 로딩할꼬야</div>
<script>
const change_result = new Promise((res,rej) => {
setTimeout(()=>{
res('✨changed text...');
rej(new Error('실패'));
},3000);
});
change_result
.then((res)=>{
const $result = document.getElementById('result');
$result.textContent = res;
})
.catch((rej)=>{
console.log(rej);
})
.finally(()=>{
const $load = document.getElementById('load');
$load.classList.add('off');
});
</script>
</body>
</html>
|
cs |
'CSS&JS > ⚡Thinkers' 카테고리의 다른 글
| [JS] thead의 th를 누르면 그 항목에 맞춰 table sort 되게 하기(2) (0) | 2022.04.01 |
|---|---|
| [JS] thead의 th를 누르면 그 항목에 맞춰 table sort 되게 하기 (0) | 2022.03.31 |
| [JS]바닐라 자바스크립트로 swiper 흉내내보기 v1.0 (0) | 2022.02.18 |
| 커스텀 셀렉트 박스 만들기(2) - HTML DOM에는 select만 작성하고 vaniila JS로 알아서 DIV 생성 (0) | 2022.02.08 |
| [JS] 바닐라 자바스크립트로 간단한 계산기 만들어보기(2) (0) | 2022.01.03 |