loading动画

HTML:<div class="box">    <div class="load">        <div class="loader">            <i></i>            <i></i>            <i></i>            <i></i>            <i></i>            <i></i>            <i></i>            <i></i>            <i></i>            <i></i>        </div>    </div></div>

CSS:<style>

　　.box {    　　width: 100%;    　　height: 300px;　　}

    .load {        width: 300px;        height: 300px;        margin-left: 100px;        background-color: gray;        display:flex;        align-items:center;        justify-content:center;    }    .loader{        position:relative;    }    .load i {        display: block;        width: 20px;        height: 3px;        background-color: white;        position:absolute;        -webkit-animation:loads 1s ease -1s infinite;    }    .load i:nth-child(1){        top:-50px;        left:0;        transform:rotateZ(90deg);        -webkit-animation:loads 1s ease -0.9s infinite;    }    .load i:nth-child(2){        top:-35px;        left:35px;        transform:rotateZ(150deg);        -webkit-animation:loads 1s ease -0.8s infinite;    }    .load i:nth-child(3){        top:-10px;        left:50px;        transform:rotateZ(0deg);        -webkit-animation:loads 1s ease -0.7s infinite;    }    .load i:nth-child(4){        top:15px;        left:50px;        transform:rotateZ(20deg);        -webkit-animation:loads 1s ease -0.6s infinite;    }    .load i:nth-child(5){        top:38px;        left:40px;        transform:rotateZ(40deg);        -webkit-animation:loads 1s ease -0.5s infinite;    }    .load i:nth-child(6){        top:50px;        left:0;        transform:rotateZ(90deg);        -webkit-animation:loads 1s ease -0.4s infinite;    }    .load i:nth-child(7){        top:40px;        left:-35px;        transform:rotateZ(120deg);        -webkit-animation:loads 1s ease -0.3s infinite;    }    .load i:nth-child(8){        top:15px;        left:-50px;        transform:rotateZ(150deg);        -webkit-animation:loads 1s ease -0.2s infinite;    }    .load i:nth-child(9){        top:-10px;        left:-50px;        -webkit-animation:loads 1s ease -0.1s infinite;    }    .load i:nth-child(10){        top:-35px;        left:-35px;        transform:rotateZ(30deg);        -webkit-animation:loads 1s ease 0s infinite;    }    @-webkit-keyframes loads{        0%{            opacity:1;        }        25%{            opacity:0.75;        }        50%{            opacity:0.5;        }        75%{            opacity:0.25;        }        100%{            opacity:0;        }    }</style>