간단하게 skeleton UI 따라해보기

페이스북이나, 유튜브같은 서비스에서는 사진이나 영상이기에 불러오는데 시간이 많이 걸리게 된다. 이럴때 Skeleton UI를 사용하게 되면 사용자는 로딩 중이라는 것을명확하게 알 수 있다.

skeleton.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./skeleton.css">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <div class="bar">
            <div class="indicator"></div>
        </div>
        <div class="wrapper">
            <div class="skeleton"></div>
        </div>
    </div>
</body>
<script>
    setTimeout(() => {
        const parentDiv = document.getElementsByClassName("skeleton")[0];
        const barDiv = document.getElementsByClassName("bar")[0]
        const childDiv = document.createElement("div");
        childDiv.style.width = "100vw";
        childDiv.style.height = "172px";
        childDiv.style.backgroundImage = 'url("https://source.unsplash.com/random")';
        childDiv.style.backgroundSize = "cover";

        parentDiv.insertAdjacentElement("beforeend", childDiv);
        barDiv.style.display = "none";
    }, 3000);
</script>

</html>

skeleton.css

body{
    margin: 0px;
    padding: 16px;
}

.container {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
  }

  .wrapper {
    width: 100%;
    height: 100%;
    display: flex;
  }

  .skeleton:empty {
    width: 100%;
    height: 100%;
    background-image: 
      linear-gradient(#f1f3f5 172px, transparent 0),
      linear-gradient(#f1f3f5 16px, transparent 0),
      linear-gradient(#f1f3f5 10px, transparent 0),
      linear-gradient(#f1f3f5 10px, transparent 0),
      linear-gradient(#f1f3f5 50px, transparent 0),
      linear-gradient(#f1f3f5 11px, transparent 0),
      linear-gradient(#f1f3f5 8px, transparent 0),
      linear-gradient(#f1f3f5 8px, transparent 0),
      linear-gradient(#f1f3f5 14px, transparent 0),
      linear-gradient(#f1f3f5 8px, transparent 0);
    background-repeat: repeat-y;
    background-size: 
        100% 304px, 
        100% 304px, 
        200px 304px, 
        300px 304px, 
        50px 304px,
        40px 304px, 
        100px 304px, 
        100px 304px, 
        112px 304px, 
        89px 304px;
    background-position: 
        0px 0px, 
        0px 188px, 
        0px 214px, 
        210px 214px, 
        0px 244px,
        56px 244px, 
        56px 264px,
        56px 279px, 
        231px 244px, 
        254px 264px;
  }

  .bar {
    width: 100%;
    position: absolute;
    animation-name: skeleton;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in;
  }

  .indicator {
    width: 0;
    box-shadow: 0 0 60px 75px white;
  }

  .bar,
  .indicator {
    height: 100vh;
  }

  @keyframes skeleton {
    0% {
      transform: translateX(0);
      opacity: 0;
    }

    20% {
      opacity: 0.25;
    }

    50% {
      opacity: 1;
    }

    80% {
      opacity: 0.5;
    }

    100% {
      transform: translateX(100%);
      opacity: 0;
    }
  }

시연

skeleton-ui

SeonHyungJo / Tip-Note

간단하게 skeleton UI 따라해보기 #42

시연