@-webkit-keyframes    load{
        0%   {margin-left:30%;opacity:0;}
        15%  {opacity: 1}
        25%  {margin-left:55%;}
        50%  {margin-left:60%;}
        75%  {opacity: 1}
        80% {margin-left:100%;opacity:0;}
    }
    @-webkit-keyframes    load2{
        0%   {margin-left:20%;opacity:0;}
        15%  {opacity: 1}
        30%  {margin-left:50%;}
        55%  {margin-left:55%;}
        75%  {opacity: 1}
        90%  {margin-left:100%;opacity:0;}
    }
    @-webkit-keyframes    load3{
        0%   {margin-left:10%;opacity:0;}
        15%  {opacity: 1}
        35%  {margin-left:45%;}
        60%  {margin-left:50%;}
        75%  {opacity: 1}
        100% {margin-left:100%;opacity:0;}
    }
    @-webkit-keyframes    load4{
        0%   {margin-left: 0%;opacity:0;}
        15%  {opacity: 1}
        40%  {margin-left: 40%;}
        65%  {margin-left: 45%;}
        75%  {opacity: 1}
        100% {margin-left:80%;opacity:0;}
    }

    .rolling {
        background: #31a1ea;
        width:7px;
        height:7px;
        opacity:0;
        border-radius: 20px;
        -webkit-animation: load 2s infinite linear ;
    }
    .dadu2{
        margin-left:-10px;
        -webkit-animation: load2 2s infinite linear ;
    }
    .dadu3{
        margin-left:-10px;
        -webkit-animation: load3 2s infinite linear ;
    }
    .dadu4{
        margin-left:-10px;
        -webkit-animation: load4 2s infinite linear ;
    }
    .loading-bar {
        position: absolute;
        width: 100%;
    }