[해피CGI][cgimall] 로딩되기 전에 애니메이션 구현하기 Skeleton loading using only a few lines of CSS

로딩되기 전에 화면의 빈 영역을 자연스럽게 보여주는 스켈레톤 로딩 애니메이션 CSS입니다.

간단한 코드만으로도 컨텐츠 로딩 전의 깜빡임을 줄여주고, 사용자 경험을 더 부드럽게 만들어 줍니다.

 

HTML 구조

<div class="container">

<!-- code here -->

<div class="card">

<div class="card-img skeleton">

<!-- waiting for img to load from javascript -->

</div>

<div class="card-body">

<h2 class="card-title skeleton">

<!-- wating for title to load from javascript -->

</h2>

<p class="card-intro skeleton">

<!-- waiting for intro to load from Javascript -->

</p>

</div>

</div>

<div class="card">

<div class="card-img">

<img src="https://assets.codepen.io/285131/uslmOwQpdRRUwr6AmBP6JdzeHjS.jpg" />

</div>

<div class="card-body">

<h2 class="card-title">

Drive (2011)

</h2>

<p class="card-intro">

Driver is a skilled Hollywood stuntman who moonlights as a getaway driv...

</p>

</div>

</div>

</div>

 

CSS(SCSS) 소스

*, *:after, *:before {

box-sizing: border-box;

}

 

body {

font-family: "Inter", sans-serif;

background-color: #f2f5f7;

}

 

// THE CARD 

.card {

display: flex;

flex-direction: column;

flex-basis: 300px;

flex-shrink: 0;

flex-grow: 0;

max-width: 100%;

background-color: #FFF;

box-shadow: 0 5px 10px 0 rgba(#000, .15);

border-radius: 10px;

overflow: hidden;

margin: 1rem;

}

 

.card-img {

padding-bottom: 56.25%;

position: relative;

img {

position: absolute;

width: 100%;

}

}

 

.card-body {

padding: 1.5rem;

}

 

.card-title {

font-size: 1.25rem;

line-height: 1.33;

font-weight: 700;

&.skeleton { // NOTICE THIS

min-height: 28px;

border-radius: 4px;

}

}

 

.card-intro {

margin-top: .75rem;

line-height: 1.5;

&.skeleton { // NOTICE THIS

min-height: 72px;

border-radius: 4px;

}

}

 

// THE LOADING EFFECT

.skeleton {

background-color: #e2e5e7;

// The shine that's going to move across the skeleton:

background-image:

linear-gradient(

90deg, 

rgba(#fff, 0), 

rgba(#fff, 0.5),

rgba(#fff, 0)

);

background-size: 40px 100%; // width of the shine

background-repeat: no-repeat; // No need to repeat the shine effect

background-position: left -40px top 0; // Place shine on the left side, with offset on the left based on the width of the shine - see background-size

animation: shine 1s ease infinite; // increase animation time to see effect in 'slow-mo'

}

 

@keyframes shine {

to {

// Move shine from left to right, with offset on the right based on the width of the shine - see background-size

background-position: right -40px top 0;

}

}

 

 

// Codepen spesific styling - only to center the elements in the pen preview and viewport 

.container {

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

width: 100%;

display: flex;

align-items: center;

justify-content: center;

flex-wrap: wrap;

}

// End Codepen spesific styling

 

첨부파일을 다운로드하거나 해당 사이트로 이동하여 전체 소스를 확인하실 수 있습니다.