纯css3实现圆形进度条效果

 @-webkit-keyframes circleProgressLoad_right{
            /*0%{
                border-top:20px solid #ED1A1A;
                border-right:20px solid #ED1A1A;
                -webkit-transform: rotate(45deg);
            }*/
            50%{
                border-top:20px solid #f3f3f3;
                border-right:20px solid #f3f3f3;
                border-left:20px solid r#f3f3f3;
                border-bottom:20px solid #f3f3f3;
                -webkit-transform: rotate(225deg);
            }
            100%{
                border-left:20px solid green;
                border-bottom:20px solid green;
                -webkit-transform: rotate(225deg);
            }
        }
        @-webkit-keyframes circleProgressLoad_left{
            0%{
                border-bottom:20px solid #f3f3f3;
                border-left:20px solid #f3f3f3;
                -webkit-transform: rotate(45deg);
            }
            50%{
                border-bottom:20px solid #f3f3f3;
                border-left:20px solid #f3f3f3;
                border-top:20px solid #f3f3f3;
                border-right:20px solid #f3f3f3;
                -webkit-transform: rotate(45deg);
            }
            100%{
                border-top:20px solid #f3f3f3;
                border-right:20px solid #f3f3f3;
                border-bottom:20px solid green;
                border-left:20px solid green;
                -webkit-transform: rotate(225deg);
            }
        }