1、SVG实现

使用AI化圆环

<html>
    <head>
        <style type="text/css">
            .loading-con {
                width: 100%;
                height: 60%;
            }
            #loading {
                animation:circle 2s linear infinite;
                transform-origin:center center;
            }
            @keyframes circle {
                0% {
                    transform:rotate(0)
                }
                100% {
                    transform:rotate(-360deg)
                }
            }
        </style>
    </head>
    <body>
        <svg class="loading-con" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 201">
            <g id="loading">
                <linearGradient id="lCircle" gradientUnits="userSpaceOnUse" x1="50" y1="0" x2="50" y2="180">
                    <stop offset="0" style="stop-color:#009ed6"/>
                    <stop offset="1" style="stop-color:#80cbe6"/>
                </linearGradient>
                
                <linearGradient id="rCircle" gradientUnits="userSpaceOnUse" x1="150" y1="20" x2="150" y2="180">
                    <stop offset="0" style="stop-color:#80cbe6"/>
                    <stop offset="1" style="stop-color:#d4eff9"/>
                </linearGradient>
                
                <path fill="url(#lCircle)" stroke-miterlimit="10" d="M1.25,100.309c0-54.637,44.256-98.936,98.875-99.01V0.501
                C45.085,0.612,0.5,45.262,0.5,100.329c0,55.067,44.585,99.718,99.626,99.828v-0.838C45.506,199.245,1.25,154.945,1.25,100.309z"/>
                
                <path fill="url(#rCircle)" stroke-miterlimit="10" d="M100.71,0.501c-0.068,0-0.136,0.003-0.204,0.003v0.797
                c0.045,0,0.09-0.002,0.136-0.002c54.661,0,98.972,44.313,98.972,98.972c0,54.661-44.311,98.972-98.972,98.972
                c-0.045,0-0.09-0.001-0.136-0.001v0.837c0.068,0.001,0.136,0.003,0.204,0.003c55.112,0,99.79-44.678,99.79-99.791
                C200.5,45.178,155.822,0.501,100.71,0.501z"/>
            </g>
        </svg>
    </body>
</html>

2、DIV实现

<html>
    <head>
        <style type="text/css">
            .loading {
                position: relative;
                width: 50px;
                height: 50px;
                border-radius: 100%;
                overflow: hidden;
                animation: circle 2s linear infinite;
            }
            .loading::before,
            .loading::after {
                content: " ";
                position: absolute;
                width: 50%;
                height: 100%;
            }
            .loading::before {
                background-image: linear-gradient(to top, #009ed6 0%, #80cbe6 100%);
            }
            .loading::after {
                background-image: linear-gradient(to bottom, #80cbe6 0%, #d4eff9 100%);
                right: 0;
            }
            .hollow {
                position: absolute;
                top:50%;
                left:50%;
                transform:translate(-50%,-50%);
                width: 40px;
                height: 40px;
                border-radius: 100%;
                z-index: 1;
                background-color: #fff;
            }
            @keyframes circle {
                0% {
                    transform: rotate(0deg);
                }
                100% {
                    transform: rotate(360deg);
                }
            }
        </style>
    </head>
    <body>
        <div class="loading">
            <div class="hollow"></div>
        </div>
    </body>
</html>

欢迎留言交流