CSS – 2种纯 css 实现loading转圈动画

太棒了：https://webdeasy.de/en/css-loading-animations/

菜鸟汇总：https://www.runoob.com/w3cnote/free-html5-css3-loaders-preloaders.html

当前页面来源：https://www.tiny66.com/example-code/css-loading

<div class="gradient-loader">
    <div class="gradient-loader-inner"></div>
</div>
<style>

    .gradient-loader {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-image: conic-gradient(rgba(255,103,104,0.1), rgba(255,103,104,1));
        position: relative;
        animation: turn-around 1.5s linear infinite;
        display: inline-block;
    }
    .gradient-loader-inner {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: #fff;
        position: absolute;
        top: 5px;
        left: 5px;
    }
    @keyframes turn-around {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }


</style>