lading-line-css

by redky

HTML

<div class="box"></div>

CSS

.box {
    width: calc(5 * 20px + 4 * 5px);
    height: 10px;
    background-repeat: no-repeat;
    -webkit-animation: line 2s infinite;
}
.box {
    background-image: -webkit-linear-gradient(left, #333 80%, #fff 80%), -webkit-linear-gradient(left, #666 80%, #fff 80%), -webkit-linear-gradient(left, #999 80%, #fff 80%), -webkit-linear-gradient(left, #bbb 80%, #fff 80%), -webkit-linear-gradient(left, #eee 80%, #fff 80%);
    background-position: 0 0, 25px 0, 50px 0, 75px 0, 100px 0;
    background-size: calc(20px + 5px) 20px;
}
@-webkit-keyframes line {
    20% {
        background-image: -webkit-linear-gradient(left, #eee 80%, #fff 80%), -webkit-linear-gradient(left, #333 80%, #fff 80%), -webkit-linear-gradient(left, #666 80%, #fff 80%), -webkit-linear-gradient(left, #999 80%, #fff 80%), -webkit-linear-gradient(left, #bbb 80%, #fff 80%);
    }
    40% {
        background-image: -webkit-linear-gradient(left, #bbb 80%, #fff 80%), -webkit-linear-gradient(left, #eee 80%, #fff 80%), -webkit-linear-gradient(left, #333 80%, #fff 80%), -webkit-linear-gradient(left, #666 80%, #fff 80%), -webkit-linear-gradient(left, #999 80%, #fff 80%);
    }
    60% {
        background-image: -webkit-linear-gradient(left, #999 80%, #fff 80%), -webkit-linear-gradient(left, #bbb 80%, #fff 80%), -webkit-linear-gradient(left, #eee 80%, #fff 80%), -webkit-linear-gradient(left, #333 80%, #fff 80%), -webkit-linear-gradient(left, #666 80%, #fff 80%);
    }
    80% {
        background-image: -webkit-linear-gradient(left, #666 80%, #fff 80%), -webkit-linear-gradient(left, #999 80%, #fff 80%), -webkit-linear-gradient(left, #bbb 80%, #fff 80%), -webkit-linear-gradient(left, #eee 80%, #fff 80%), -webkit-linear-gradient(left, #333 80%, #fff 80%);
    }
    100% {
        background-image: -webkit-linear-gradient(left, #333 80%, #fff 80%), -webkit-linear-gradient(left, #666 80%, #fff 80%), -webkit-linear-gradient(left, #999 80%, #fff 80%), -webkit-linear-gradient(left, #bbb 80%, #fff 80%),...