Google Live Animation - CSS3

by Jens Kühn

HTML

<div class="load-ind-mask">
            <div class="load-ind-wrap">
                <div class="load-ind-var"></div>
            </div>
        </div>

CSS

.load-ind-mask {
        overflow: hidden;
    }

    .load-ind-wrap {
        width: 200%;
        line-height: 0;
        animation: indicator-wrapper-animation 2s 1s infinite alternate cubic-bezier(.21, .85, .34, .98);
    }
    .load-ind-var {
        height: 2px;
        float: left;
        background-color: #259b24;
        width: 50%;
        -webkit-transform-origin: left;
        -webkit-transform: scaleX(0);
        animation: live-indicator-length-animation 2s 1s infinite alternate cubic-bezier(.87, .01, .87, .5);
    }

    @keyframes live-indicator-length-animation {
        0% {
            -webkit-transform: scaleX(0)
        }
        60% {
            -webkit-transform: scaleX(0)
        }
        80% {
            -webkit-transform: scaleX(1)
        }
        100% {
            -webkit-transform: scaleX(1)
        }
    }

    @keyframes indicator-wrapper-animation {
        0% {
            -webkit-transform: translateX(0%)
        }
        80% {
            -webkit-transform: translateX(0%)
        }
        100% {
            -webkit-transform: translateX(50%);
            -webkit-transform: translateX(-webkit-calc(50% - 2px));
            -webkit-transform: translateX(calc(50% - 2px))
        }
    }