<html>
    <head>
        <title>Demo: Gradient Slide</title>
    </head>
    <link href="https://fonts.googleapis.com/css?family=Nunito+Sans" rel="stylesheet">
    <link rel="stylesheet" href="dist/build.css">
    <body>
        <header>
            <h1>Skeleton Screen</h1>
        </header>
        <div class="wrap">
            <h3>
                <span>Generic card example</span>
            </h3>
            <div class="flex-grid generic-card">
                <!-- ADD .loading CLASS TO ANY ELEMENT TO SHIMMER/ANIMATE -->
                <div class="card loading"></div>
                <div class="card loading"></div>
                <div class="card loading"></div>
            </div>
            <h3>
                <span>Custom card example</span>
            </h3>
            <div class="flex-grid custom-card">
                <div class="card">
                    <div class="avatar loading"></div>
                    <div class="content loading"></div>
                    <div class="content loading"></div>
                    <div class="content loading"></div>
                    <div class="content loading"></div>
                    <div class="content loading"></div>
                    <div class="content loading"></div>
                </div>
                <div class="card">
                    <div class="avatar loading"></div>
                    <div class="content loading"></div>
                    <div class="content loading"></div>
                    <div class="content loading"></div>
                    <div class="content loading"></div>
                    <div class="content loading"></div>
                    <div class="content loading"></div>
                </div>
                <div class="card">
                    <div class="avatar loading"></div>
                    <div class="content loading"></div>
                    <div class="content loading"></div>
                    <div class="content loading"></div>
                    <div class="content loading"></div>
                    <div class="content loading"></div>
                    <div class="content loading"></div>
                </div>
            </div>
        </div>
    </body>
</html>
@keyframes gradient-slide {
    0% {
        background-position: 100% 50%
    }

    to {
        background-position: 0% 50%
    }
}

%loading {
    -webkit-animation: gradient-slide 2.2s ease infinite;
    animation: gradient-slide 2.2s ease infinite;
    background: 0 0/300% 300% linear-gradient(90deg,#eee 40%,#f7f7f7 50%,#eee 60%)
}

.loading {
    @extend %loading;
}

body {
    color: #36353d;
    font-family: 'Nunito Sans', sans-serif;
    margin: 0;
}

.wrap {
    margin: 0 auto;
    max-width: 1200px;
}

h1 {
    font-size: 42px;
    margin: 80px 0;
}

h1, h3 {
    font-weight: 200;
    text-align: center;
}

h3 {
    position: relative;
    span {
        background-color: #fff;
        padding: 0 20px;
        position: relative;
        z-index: 500;
    }
    &:before {
        border-top: 1px dotted #e5e7ea;
        content: '';
        display: block;
        position: absolute;
        top: 13px;
        width: 100%;
        z-index: 250;
    }
}

.flex-grid {
    display: block;

    @media screen and (min-width: 540px) {
        display: flex;
        justify-content: space-between;
    }
}

// generic card example
.card {
    border: 1px solid #e5e7ea;
    border-radius: 5px;
    box-sizing: border-box;
    flex: 1;
    margin: 20px;
    min-height: 300px;
    padding: 30px;
}

// custom card example
.custom-card {
    .card {
        .avatar {
            border-radius: 50%;
            height: 70px;
            margin-bottom: 30px;
            width: 70px;
        }
        .content {
            height: 16px;
            margin-bottom: 16px;
            width: 100%;
        }
    }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.