太棒了: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>

作者 meiyoufan

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注