비전공자 개발일기

Skeleton Screen 본문

HTML _CSS

Skeleton Screen

HiroDaegu 2023. 1. 12. 00:08
728x90
SMALL

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SKELETON SCREEN</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="skeleton"></div>
        <div class="info">
            <div class="skeleton"></div>
            <div class="skeleton" style="width: 70%"></div>
            <div class="skeleton" style="width: 50%"></div>
        </div>
    </div>
</body>
</html>
html {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background-size: cover;
    background-repeat: no-repeat;
    background: linear-gradient(45deg, rgba(34, 193, 195, 1) 0%, rgba(253, 187, 45, 1) 100%);
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.container {
    display: grid;
    grid-template-columns: 28% 70%;
    grid-gap: 2%;
    background-color: #F7F7F7;
    box-shadow: 2px 2px 6px rgba(100, 100, 100, .5), 0 0 6px rgba(100, 100, 100, .5);
    padding: 10px;
    width: 500px;
    height: 150px;
}

.container .info {
    display: grid;
    grid-template-rows: 40px 30px 20px;
    grid-row-gap: 10px;
    padding: 20px 0;
}

.skeleton {
    background-color: #CACCED;
    overflow: hidden;
    border-radius: 5%;
}

.skeleton::before {
    content: '';
    display: block;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), #DADAE8, rgba(255, 255, 255, 0));
    animation: skeleton-animation 1.25s ease-in-out infinite;
}

@keyframes skeleton-animation {
    0%, 100% {
        transform: translateX(-100%);
    }
    50% {
        transform: translateX(200%);
    }
}
728x90
LIST

'HTML _CSS' 카테고리의 다른 글

Animated Instagram Logo  (0) 2023.01.14
Animated Service Section Card UI  (0) 2023.01.13
Intro Text Animation  (0) 2023.01.11
Multi Colored Text  (0) 2023.01.10
Mail Button Micro-Interaction  (0) 2023.01.09
'HTML _CSS' Related Articles more