React 로딩 스켈레톤 컴포넌트 만들기 (SCSS)

📍완성된 이미지

📍구현

2개의 element가 필요하다

- 그라데이션 element

- 백그라운드 element

 

그라데이션 element는 회색 - 흰색 - 회색 이렇게 그라데이션 되게 스타일링한다

 

background element (회색) 위로 그라데이션 element가 지나가게 하면 된다

- 이때, 시작 지점은 | 그라데이션 | 백그라운드 | <- 이 위치

- 그리고 그라데이션 element가 백그라운드 element 위로 완전히 겹쳐지게 우측으로 이동

- overflow hidden을 적용하여 삐져나온 부분이 안보이게 해준다

 

📍코드

- Skeleton.jsx

import "./Skeleton.scss";

const Skeleton = () => {
  return (
    <main>
      <ul className="o-vertical-spacing o-vertical-spacing--l">
        <li className="blog-post o-media">
          <div className="o-media__figure">
            <span
              className="skeleton-box"
              style={{ width: "100px", height: "80px" }}
            ></span>
          </div>
          <div className="o-media__body">
            <div className="o-vertical-spacing">
              <h3 className="blog-post__headline">
                <span className="skeleton-box" style={{ width: "55%" }}></span>
              </h3>
              <p>
                <span className="skeleton-box" style={{ width: "80%" }}></span>
                <span className="skeleton-box" style={{ width: "90%" }}></span>
                <span className="skeleton-box" style={{ width: "83%" }}></span>
                <span className="skeleton-box" style={{ width: "80%" }}></span>
              </p>
              <div className="blog-post__meta">
                <span className="skeleton-box" style={{ width: "70%" }}></span>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </main>
  );
};

export default Skeleton;

 

- Skeleton.scss

.skeleton-box {
  display: inline-block;
  height: 1em; // 부모 요소와 같게
  position: relative;
  overflow: hidden;
  background-color: #DDDBDD;

  &::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%); // 완전히 왼쪽에서 시작
    // 수평 그라데이션
    // 0~20%, 20%~60%, 60%~100% 각 구간 에서 색이 자연스레 바뀜.
    background: linear-gradient(
        90deg,
        rgba(#fff, 0) 0,
        rgba(#fff, 0.2) 20%,
        rgba(#fff, 0.5) 60%,
        rgba(#fff, 0) 100%
    );
    animation: shimmer 2s infinite;
    content: "";
  }

  // 2초에 걸쳐 도형을 겹치게 우측으로 이동
  @keyframes shimmer {
    100% {
      transform: translateX(100%);
    }
  }
}

.blog-post {
  &__headline {
    font-size: 1.25em;
    font-weight: bold;
  }

  &__meta {
    font-size: 0.85em;
    color: #6b6b6b;
  }
}

// OBJECTS

.o-media {
  display: flex;

  &__body {
    flex-grow: 1;
    margin-left: 1em;
  }
}

.o-vertical-spacing {
  > * + * {
    margin-top: 0.75em;
  }

  &--l {
    > * + * {
      margin-top: 2em;
    }
  }
}

// MISC

* {
  box-sizing: border-box;
}

body {
  max-width: 42em;
  margin: 0 auto;
  padding: 3em 1em;
  font-family: 'Karla', sans-serif;
  line-height: 1.4;
}

main {
  margin-top: 3em;
}

 

📍데모 사이트 (codesandbox)

https://codesandbox.io/s/loading-skeleton-yfrnw7

loading-skeleton - CodeSandbox

 

 

📍참고

https://codepen.io/JCLee/pen/dyPejGV

Pure CSS Skeleton Loading Animation With Shimmer