css3實現loading

HTML

        <div class="loading">
        <span></span>
        </div>

css

.loading{
            width: 80px;
            height: 80px;
            border-radius: 50%;
            margin: 0 auto;
            margin-top:100px;
            position: relative;
            border:5px solid lightgreen;
            -webkit-animation: rota 2s linear infinite;
        }
        .loading span{
            display: inline-block;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: lightgreen;
            position: absolute;
            left: 50%;
            margin-top: -15px;
            margin-left: -15px;
            -webkit-animation: cb 2s linear infinite;
        }
        @-webkit-keyframes cb{
            0%{
                background:#00FF99;
            }
            50%{
                background:#6699FF;
            }
            100%{
                background:#00FF99 ;
            }
        }
        @-webkit-keyframes rota{
            0%{
                -webkit-transform: rotate(0deg);
                border-color:#00FF99;
            }
            50%{
                -webkit-transform: rotate(180deg);
                border-color:#6699FF;
            }
            100%{
                -webkit-transform: rotate(360deg);
                border-color:#00FF99 ;
            }
        }