/* @import url('https://fonts.googleapis.com/css?family=Roboto'); */

.loader-box {
    width: 70%;
    background: #f9f9f9;
    border: 1px solid #ccc;
    overflow: hidden;
    margin: 50px auto;
    border-radius: 10px;
    /* padding-left: 10px; */
    padding: 10px 2px;
    box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
}

.loader-box>.blink {
    animation: blink 2s linear infinite;
    font-size: 16px !important;
    font-family: 'Roboto', sans-serif;
    font-weight: 650;
    padding: 5px 10px;
    text-transform: uppercase;
}

.loader-box .animation {
    margin-top: 20px;
}

div.cl1 {
    display: inline-block;
    width: 14px;
    border-radius: 50%;
    height: 14px;
    position: relative;
    -webkit-animation: mymove 2s infinite;
    -webkit-animation-timing-function: linear;
    animation: mymove 2s infinite;
    animation-timing-function: linear;
}

div.cl2 {
    animation: mymove1 3s infinite !important;
}

div.cl3 {
    animation: mymove2 4s infinite !important;
}

div.cl4 {
    animation: mymove3 5s infinite !important;
}

@-webkit-keyframes mymove {
    from {
        left: 0%;
        background: white;
    }

    to {
        left: 100%;
        background: red;
    }
}

@keyframes mymove {
    from {
        left: 0%;
        background: white;
    }

    to {
        left: 100%;
        background: red;
    }
}

@-webkit-keyframes mymove1 {
    from {
        left: 0%;
        background: white;
    }

    to {
        left: 100%;
        background: green;
    }
}

@keyframes mymove1 {
    from {
        left: 0%;
        background: white;
    }

    to {
        left: 100%;
        background: green;
    }
}

@-webkit-keyframes mymove2 {
    from {
        left: 20%;
        background: white;
    }

    to {
        left: 100%;
        background: orange;
    }
}

@keyframes mymove2 {
    from {
        left: 20%;
        background: white;
    }

    to {
        left: 100%;
        background: orange;
    }
}

@-webkit-keyframes mymove3 {
    from {
        left: 10%;
        background: white;
    }

    to {
        left: 100%;
        background: blue;
    }
}

@keyframes mymove3 {
    from {
        left: 10%;
        background: white;
    }

    to {
        left: 100%;
        background: blue;
    }
}



@keyframes blink {
    50% {
        opacity: 0;
    }
}