.position{float:left;margin:100px 20px}.progress-bar{height:100px;width:100px;background:#fff;margin:0 auto}.progress-bar div{position:absolute;height:100px;width:100px;border-radius:50%}.progress-bar div span{position:absolute;font-family:Arial;font-size:20px;line-height:75px;height:75px;width:75px;left:12.5px;top:12.5px;text-align:center;border-radius:50%;background-color:#fff;color:#000}.progress-bar .background{background-color:#b3cef6}.progress-bar .rotate{clip:rect(0 50px 100px 0);background-color:#4b86db}.progress-bar .left{clip:rect(0 50px 100px 0);opacity:1;background-color:#b3cef6}.progress-bar .right{clip:rect(0 50px 100px 0);transform:rotate(180deg);opacity:0;background-color:#4b86db}.modal-chasis .progress-bar{height:70px;width:70px}.modal-chasis .progress-bar div{height:70px;width:70px}.modal-chasis .progress-bar div span{font-size:18px;line-height:56px;height:56px;width:56px;left:7px;top:7px}.modal-chasis .progress-bar .rotate{clip:rect(0 35px 70px 0);background-color:#4b86db}.modal-chasis .progress-bar .left{clip:rect(0 35px 70px 0);opacity:1;background-color:#b3cef6}.modal-chasis .progress-bar .right{clip:rect(0 35px 70px 0);transform:rotate(180deg);opacity:0;background-color:#4b86db}.modal-chasis .grph-circle{width:70px;height:70px;border-width:7px;font-size:18px}@keyframes toggle{0%{opacity:0}100%{opacity:1}}