Preloader

by Anatoly Kulikov

HTML

<div class="preloader">
  <span class="badge"></span>
  <span class="content"></span>
</div>

SCSS

* {
    box-sizing: border-box;
}

.preloader {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 16px;
    outline: grey solid 1px;
    overflow: hidden;
}

.preloader::before {
    content: '';
    position: absolute;
    top: 0;
    display: block;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(157,157,157,0.3) 50%, rgba(0,0,0,0) 100%);
    animation: searchPlaceholderImage linear 2s infinite;
}

@keyframes searchPlaceholderImage {
    from {
        left: -50%;
    }
    to {
        left: 150%;
    }
}

.badge {
    display: block;
    width: 20%;
    padding: 16px;
    background: #11cccc;
}

.content {
    display: block;
    width: 78%;
    padding: 16px;
    background: #e0e0e0;
}