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