SOURCE

<div class="screen-root">
    <ul>
        <li>
            <div class="screen__book-cover"></div>
            <div class="screen__book-name"></div>
            <div class="screen__book-desc">
                <div class="screen__book-desc__chan-name"></div>
                <div class="screen__book-desc__dot"></div>
                <div class="screen__book-desc__subchan-name"></div>
            </div>
        </li>
        <li>
            <div class="screen__book-cover"></div>
            <div class="screen__book-name"></div>
            <div class="screen__book-desc">
                <div class="screen__book-desc__chan-name"></div>
                <div class="screen__book-desc__dot"></div>
                <div class="screen__book-desc__subchan-name"></div>
            </div>
        </li>
        <li>
            <div class="screen__book-cover"></div>
            <div class="screen__book-name"></div>
            <div class="screen__book-desc">
                <div class="screen__book-desc__chan-name"></div>
                <div class="screen__book-desc__dot"></div>
                <div class="screen__book-desc__subchan-name"></div>
            </div>
        </li>
        <li>
            <div class="screen__book-cover"></div>
            <div class="screen__book-name"></div>
            <div class="screen__book-desc">
                <div class="screen__book-desc__chan-name"></div>
                <div class="screen__book-desc__dot"></div>
                <div class="screen__book-desc__subchan-name"></div>
            </div>
        </li>
    </ul>
</div>
  

body {
     background-color: aliceblue;
}

.screen-root {
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: center;
     margin-top: 20vh;
}

ul {
     background-color: #fff;
     margin: 0 auto;
     padding: 20px;
     width: 40vw;
     font-size: 0;
     display: flex;
     justify-content: space-between
}

li {
    list-style: none;
    display: inline-block;
    width: 20%;

}
.screen__book-cover {
    height: 3rem;
    margin-bottom: 0.3rem;
}
.screen__book-name {
    height: 0.5rem;
    margin-bottom: 0.3rem;
}
.screen__book-desc {
    height: 0.5rem;
    margin-bottom: 0.3rem;

}

.screen__book-desc {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}
.screen__book-desc__chan-name,
.screen__book-desc__subchan-name {
 
    width: 40%;
    height: 100%;
    margin-top: 0;
}
.screen__book-desc__dot {
    width: 2px;
    height: 2px;
}

.screen__book-cover,
.screen__book-name,
.screen__book-desc__chan-name,
.screen__book-desc__subchan-name,
.screen__book-desc__dot {
   
     background-image: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
     /* background-image: linear-gradient(90deg, #ff0000 25%, #41de6a 37%, #ff0000 63%); */
    
     /* background: green; */

     background-size: 400% 100%;

     background-position: 100% 50%;
     animation: skeleton-loading 2s ease infinite;
}

@keyframes skeleton-loading {
     0% {
          background-position: 100% 50%;
     }

     100% {
          background-position: 0 50%;
     }
}