facebook과 같이 로드하는 동안 플레이스홀더를 작성하는 방법
angular js를 사용하여 콘텐츠를 로드할 때 facebook처럼 백그라운드 로드 라인을 만드는 방법.
다음과 같이 css background linear-gradient를 사용하여 만들 수 있습니다.
@keyframes placeHolderShimmer{
0%{
background-position: -468px 0
}
100%{
background-position: 468px 0
}
}
.linear-background {
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeHolderShimmer;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 1000px 104px;
height: 338px;
position: relative;
overflow: hidden;
}<div class="linear-background">
</div>그리고 효과를 위해 흰색의 Div로 칠합니다.
@keyframes placeHolderShimmer{
0%{
background-position: -468px 0
}
100%{
background-position: 468px 0
}
}
.linear-background {
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeHolderShimmer;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 1000px 104px;
height: 200px;
position: relative;
overflow: hidden;
}
.inter-draw{
background: #FFF;
width: 100%;
height: 100px;
position: absolute;
top: 100px;
}
.inter-right--top{
background: #FFF;
width: 100%;
height: 20px;
position: absolute;
top: 20px;
left: 100px;
}
.inter-right--bottom{
background: #FFF;
width: 100%;
height: 50px;
position: absolute;
top: 60px;
left: 100px;
}
.inter-crop{
background: #FFF;
width: 20px;
height: 100%;
position: absolute;
top: 0;
left: 100px;
}<div class="linear-background">
<div class="inter-draw"></div>
<div class="inter-crop"></div>
<div class="inter-right--top"></div>
<div class="inter-right--bottom"></div>
</div>여러 번 수행해야 하는 경우 이 작업은 번거로울 수 있으므로 이 라이브러리는 자동화를 수행합니다.js
Facebook의 플레이스 홀더가 어떻게 기능하는지 자세히 설명하는 블로그 투고를 참조할 수 있습니다.
http://cloudcannon.com/deconstructions/2014/11/15/facebook-content-placeholder-deconstruction.html
기본적으로 css로 스타일링된 정적 html을 몇 개 삽입하여 제공되는 콘텐츠와 비슷하도록 합니다.
<div class="placeholder">
<!-- some boxes in light grey to look like content -->
</div>
로드가 완료되면 자리 표시자를 제거합니다.
$(".placeholder").remove();
플레이스 홀더 애니메이션을 로드하기 위해 npm 패키지가 필요한 경우 https://github.com/zalog/placeholder-loading를 만듭니다.
필요에 따라 구성할 수 있는 라이브러리입니다.
응답성, 고속, 심플, GPU 최적화 애니메이션 및 cSS 전용입니다.
데모:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo placeholder-loading</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://unpkg.com/placeholder-loading/dist/css/placeholder-loading.min.css" rel="stylesheet">
</head>
<body>
<div class="ph-item">
<div class="ph-col-2">
<div class="ph-avatar"></div>
</div>
<div>
<div class="ph-row">
<div class="ph-col-4"></div>
<div class="ph-col-8 empty"></div>
<div class="ph-col-6"></div>
<div class="ph-col-6 empty"></div>
<div class="ph-col-2"></div>
<div class="ph-col-10 empty"></div>
</div>
</div>
<div class="ph-col-12">
<div class="ph-picture"></div>
<div class="ph-row">
<div class="ph-col-10 big"></div>
<div class="ph-col-2 empty big"></div>
<div class="ph-col-4"></div>
<div class="ph-col-8 empty"></div>
<div class="ph-col-6"></div>
<div class="ph-col-6 empty"></div>
<div class="ph-col-12"></div>
</div>
</div>
</div>
</body>
</html>npm i light-skeleton
https://www.npmjs.com/package/light-skeleton
const PreLoader = () => {
let Hei = '100px';
let MB = '15px';
return (
<React.Fragment>
<TitleSkeleton
style={{
margin: '5px',
marginBottom: MB
}}
width={'90%'}
height={Hei}
/>
<TitleSkeleton
style={{
margin: '5px',
marginBottom: MB
}}
width={'90%'}
height={Hei}
/>
</React.Fragment>
)
}
언급URL : https://stackoverflow.com/questions/35151887/how-to-create-placeholder-while-loading-like-facebook
'programing' 카테고리의 다른 글
| Android에서 HTTP Client를 사용하여 JSON에서 POST 요청을 보내는 방법은 무엇입니까? (0) | 2023.03.15 |
|---|---|
| Elastic Search를 사용하여 여러 필드에서 검색 (0) | 2023.03.15 |
| 클릭 시 Ajax를 사용하여 Wordpress Post를 로드하는 방법 (0) | 2023.03.15 |
| 케이스 클래스에 필드가 1개뿐인 경우 json을 케이스 클래스로 전환하는 방법 (0) | 2023.03.15 |
| express.json vs bodyParser.json (0) | 2023.03.10 |