<style>
.out{
background-image: conic-gradient(from 1.5708rad at 50% 50%, #FFFFFF 0%, #333333 100%);
width: 48px;
height: 48px;
border-radius: 50%;
position: relative;
animation:fadenum 1.2s infinite;
animation-timing-function:linear;
}
@keyframes fadenum{
0%{
transform:rotate(0deg);}
100%{
transform:rotate(360deg);}
}
.inner{
position: absolute;
width:44px;
height: 44px;
left:2px;
top:2px;
border-radius: 50%;
background: #fff;
}
ul{
height:200px;
overflow-y: auto;
}
li{
width:100%;
height:50px;
border:1px solid red;
margin-bottom:1px;
display: block;
}
body{
overflow: hidden;
}
</style>
<body>
<div class="out">
<div class="inner"></div>
</div>
</body>
Rotating circle loading effect
Guess you like
Origin blog.csdn.net/weixin_43392545/article/details/131801317
Ranking