Product Loading Animation

by Kesavamoorthi Subramanian

HTML

<div class="loading-container">
    <div class="wireframe"></div>
</div>

CSS

@-webkit-keyframes loadingContainer {
    0% {
        background-position: -800px 0
    }
    to {
        background-position: 800px 0
    }
}

.loading-container {
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: loadingContainer;
    -webkit-animation-timing-function: linear;
    background: #f6f7f8;
    background-image: -webkit-linear-gradient(left, #f6f7f8, #eee 50%, #f6f7f8);
    background-image: linear-gradient(90deg, #f6f7f8, #eee 50%, #f6f7f8);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#FFF6F7F8", endColorstr="#FFF6F7F8", GradientType=1);
    background-repeat: no-repeat;
    display: table;
}

.loading-container .wireframe {
    width: 639px;
    height: 721px;
    background-size: 100%;
    background-repeat: no-repeat;
    background:...