html页面
<!DOCTYPEhtml>
<htmllang="zh">
<head>
<metacharset="utf-8">
<linkrel="stylesheet"href="style.css">
<title>渐变加载条</title>
</head>
<body>
<divclass="app">
<divclass="loading38">
<spanclass="load-span38"></span>
<spanclass="load-span38"></span>
<spanclass="load-span38"></span>
<spanclass="load-span38"></span>
<spanclass="load-span38"></span>
<spanclass="load-span38"></span>
<spanclass="load-span38"></span>
<spanclass="load-span38"></span>
</div>
</div>
</body>
</html>
css样式
/**style.css**/
.app{
width:100%;
height:100vh;
background-color:#ffffff;
position:relative;
display:flex;
justify-content:center;
align-items:center;
}
.loading38{
--r-num:45deg;/*定义角度值*/
width:40px;
height:40px;
position:relative;
animation:loading38-eff1ssteps(8)bothinfinite;
}
.load-span38{
width:6px;
height:6px;
display:block;
border-radius:3px;
position:absolute;
left:17px;
top:0;
transform-origin:3px20px;
}
.load-span38:nth-of-type(1){
transform:rotate(var(--r-num));
background:#2FACFD;
}
.load-span38:nth-of-type(2){
transform:rotate(calc(var(--r-num)*2));
background:#33B4FD;
}
.load-span38:nth-of-type(3){
transform:rotate(calc(var(--r-num)*3));
background:#38BEFE;
}
.load-span38:nth-of-type(4){
transform:rotate(calc(var(--r-num)*4));
background:#3ECAFE;
}
.load-span38:nth-of-type(5){
transform:rotate(calc(var(--r-num)*5));
background:#45D7FE;
}
.load-span38:nth-of-type(6){
transform:rotate(calc(var(--r-num)*6));
background:#4BE4FE;
}
.load-span38:nth-of-type(7){
transform:rotate(calc(var(--r-num)*7));
background:#52F1FF;
}
.load-span38:nth-of-type(8){
transform:rotate(calc(var(--r-num)*8));
background:#57FBFF;
}
@keyframesloading38-eff{
to{
transform:rotate(0deg);
}
from{
transform:rotate(-360deg);
}
}
|
运行时间载入中.....