react-cqtoolbox/lib/loader/theme.css

[![Travis][build-badge]][build] [![npm package][npm-badge]][npm] [![Coveralls][coveralls-badge]][coveralls]

.loadWrapper {
    font-size: 0;
    width: 33px;
    height: 30px;
    position: relative;
    overflow: hidden;
    box-sizing: content-box;
}
.loadWrapper .load {
    margin-left: 3px;
    background: rgb(0, 188, 212);
    width: 3px;
    height: 100%;
    display: inline-block;
    -webkit-animation: loaderAnim 1.2s infinite ease-in-out;
    animation: loaderAnim 1.2s infinite ease-in-out;
}
.loadWrapper .load:nth-child(2) {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}
.loadWrapper .load:nth-child(3) {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
}
.loadWrapper .load:nth-child(4) {
    -webkit-animation-delay: -.9s;
    animation-delay: -.9s;
}
.loadWrapper .load:nth-child(5) {
    -webkit-animation-delay: -.8s;
    animation-delay: -.8s;
}
@-webkit-keyframes loaderAnim {
    0%,100%,40% {
        -webkit-transform: scaleY(.4);
                transform: scaleY(.4);
    }

    20% {
        -webkit-transform: scaleY(1);
                transform: scaleY(1);
    }
}
@keyframes loaderAnim {
    0%,100%,40% {
        -webkit-transform: scaleY(.4);
                transform: scaleY(.4);
    }

    20% {
        -webkit-transform: scaleY(1);
                transform: scaleY(1);
    }
}