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>
欢迎留言交流
