css 类似于360安全体检的动画

<div class=\"containertj\"><div class=\"status-circle status-1\"><div class=\"circle rotary-circle\"></div><div class=\"circle content-circle\"><div class=\"circle detail-circle\">体检中..</div></div></div></div>.containertj {width: 126px;height: 126px;}@keyframes rotary {0% {transform: rotate(0deg);}25% {transform: rotate(90deg);}50% {transform: rotate(180deg);}75% {transform: rotate(270deg);}100% {transform: rotate(360deg);}}.status-circle {position: relative;height: 100%;}.circle {display: flex;align-items: center;justify-content: center;border-radius: 100%;}.rotary-circle {height: 100%;box-sizing: border-box;animation: rotary 2s infinite;-webkit-animation: rotary 2s infinite;}.content-circle {position: absolute;top: 1%;left: 1%;width: 98%;height: 98%;background: #fff;}.detail-circle {width: 90%;height: 90%;color: #fff;}.status-1 .detail-circle {background: rgb(68, 218, 111);}.status-1 .rotary-circle {background: -webkit-linear-gradient(left,rgba(68, 218, 111, 1),rgba(68, 218, 111, 0) 50%,rgba(68, 218, 111, 1));background: -o-linear-gradient(left,rgba(68, 218, 111, 1),rgba(68, 218, 111, 0) 50%,rgba(68, 218, 111, 1));background: -ms-linear-gradient(left,rgba(68, 218, 111, 1),rgba(68, 218, 111, 0) 50%,rgba(68, 218, 111, 1));background: linear-gradient(left,rgba(68, 218, 111, 1),rgba(68, 218, 111, 0) 50%,rgba(68, 218, 111, 1));}