CSS loading animation

loading_skeleton.css

// https://css-tricks.com/building-skeleton-screens-css-custom-properties/

.loading {
    position: relative;
    width: 100%;
    display: block;
    margin: 0 0 10px;
    height: 20px;

    &--inner {
        position: relative;
        width: 100%;
        height: inherit;
        border-radius: 3px;
        animation-duration: 1.25s;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
        animation-name: loading;
        animation-timing-function: linear;
        background: darkgray;
        background: linear-gradient(to right, #e0e0e0 10%, #d0d0d0 18%, #e0e0e0 33%);
        background-size: 800px 104px;
    }
}

@keyframes loading {
    0% {
        background-position: -468px 0;
    }

    100% {
        background-position: 468px 0;
    }
}