效果图如下
<body>
<div id="loading">
<div id="circle">
<div class="circle-item1"></div>
<div class="circle-item2"></div>
<div class="circle-item3"></div>
<div class="circle-item4"></div>
</div>
</div>
</body>
css代码
html,
body {
width: 100%;
height: 100%;
}
* {
margin: 0;
padding: 0;
}
//通过css3的动画功能实现
@-ms-keyframes loading {
0% {
transform: rotate(0deg);
}
20% {
transform: rotate(72deg);
}
40% {
transform: rotate(144deg);
}
60% {
transform: rotate(216deg);
}
80% {
transform: rotate(288deg);
}
100% {
transform: rotate(360deg);
}
}
@-webkit-keyframes loading {
0% {
transform: rotate(0deg);
}
20% {
transform: rotate(72deg);
}
40% {
transform: rotate(144deg);
}
60% {
transform: rotate(216deg);
}
80% {
transform: rotate(288deg);
}
100% {
transform: rotate(360deg);
}
}
@-moz-keyframes loading {
0% {
transform: rotate(0deg);
}
20% {
transform: rotate(72deg);
}
40% {
transform: rotate(144deg);
}
60% {
transform: rotate(216deg);
}
80% {
transform: rotate(288deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes name {
0% {
transform: rotate(0deg);
}
20% {
transform: rotate(72deg);
}
40% {
transform: rotate(144deg);
}
60% {
transform: rotate(216deg);
}
80% {
transform: rotate(288deg);
}
100% {
transform: rotate(360deg);
}
}
#loading {
position: relative;
width: 100%;
height: 100%;
}
#circle {
position: absolute;
display: flex;
flex: 1;
justify-content: space-between;
align-content: space-between;
flex-wrap: wrap;
width: 22px;
height: 22px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform-origin: 50% 50%;
animation: loading 1s linear infinite;//转一圈的时间是1s,一直转
}
[class^="circle-"] {
width: 8px;
height: 8px;
border-radius: 50%;
}
.circle-item1 {
background-color: rgba(73, 94, 145);
}
.circle-item2 {
background-color: rgba(134, 149, 182);
}
.circle-item3 {
background-color: rgba(189, 197, 215);
}
.circle-item4 {
background-color: rgba(189, 197, 215);
}
函数组件 .js/.ts文件
import './loading.less';//引入css样式，就是你存在css的路径
export default function Loading() {
return (
<div id="loading">
<div id="circle">
<div className="circle-item1"></div>
<div className="circle-item2"></div>
<div className="circle-item3"></div>
<div className="circle-item4"></div>
</div>
</div>
);
}
