<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> body { height: 100%; background: rgba(0,0,0,.5); } body,div { padding: 0; margin: 0; } .circleProgress_wrapper{ width: 200px; height: 200px; margin: 50px auto; position: relative; /*border:1px solid #ddd;*/ } .wrapper{ width: 100px; height: 200px; position: absolute; top:0; overflow: hidden; } .right{ right:0; } .left{ left:0; } .circleProgress{ width: 188px; height: 188px; border: 6px solid #0FCD8B; border-radius: 50%; position: absolute; top:0; -webkit-transform: rotate(45deg); } .rightcircle{ border-top: 6px solid #fff; border-right: 6px solid #fff; right:0; -webkit-animation: circleProgressLoad_right 1.5s linear forwards; } .leftcircle{ border-bottom: 6px solid #fff; border-left: 6px solid #fff; left:0; -webkit-animation: circleProgressLoad_left 1.5s linear forwards; } @-webkit-keyframes circleProgressLoad_right{ 0%{ -webkit-transform: rotate(45deg); } 50%{ -webkit-transform: rotate(225deg); } 100%{ -webkit-transform: rotate(225deg); } } @-webkit-keyframes circleProgressLoad_left{ 0%{ -webkit-transform: rotate(45deg); } 50%{ -webkit-transform: rotate(45deg); } 100%{ -webkit-transform: rotate(225deg); } } </style> <body> <div class="circleProgress_wrapper"> <div class="wrapper right"> <div class="circleProgress rightcircle"></div> </div> <div class="wrapper left"> <div class="circleProgress leftcircle"></div> </div> </div> </body> </html>