纯css代码实现雷达扫描loading网页效果

<style>
.zh-page {
    position: relative;
    width: 300px;
    height: 400px
}
.zh-loading-wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    margin: -140px 0 0 -140px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    overflow: hidden
}
.zh-loading {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 85, 255, .05);
    -webkit-animation: loading 3s linear infinite;
    animation: loading 3s linear infinite
}
.zh-loading:after {
    content: "";
    display: block;
    width: 50%;
    height: 50%;
    background: linear-gradient(45deg, transparent 50%, rgba(0, 85, 255, .2) 100%)
}
@-webkit-keyframes loading {
    to {
        transform: rotate(360deg)
    }
}
@keyframes loading {
    to {
        transform: rotate(360deg)
    }
}
</style>
<div class="zh-page">
    <div class="zh-loading-wrap">
        <div class="zh-loading"></div>
    </div>
</div>