//css部分
body{
margin: 0;
padding: 0;
background: #262626;
}
.ring{
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
width: 150px;
height: 150px;
background: transparent;
border: 3px solid #3c3c3c;
border-radius: 50%;
text-align: center;
line-height: 150px;
font-family: sans-serif;
font-size: 20px;
color: #fff000;
letter-spacing: 4px;
text-transform: uppercase;
text-shadow: 0 0 10px #FFF000;
box-shadow: 0 0 20px rgba(0,0,0,.5);
}
.ring:before{
content: "";
position: absolute;
top:-3px;
left:-3px;
width: 100%;
height: 100%;
border: 3px solid transparent;
border-top: 3px solid #FFF000;
border-right: 3px solid #FFF000;
border-radius: 50%;
animation: animateCricle 2s linear infinite;
}
span{
display: block;
position:absolute;
top:calc( 50% - 2px );
left: 50%;
width:50%;
height: 4px;
background: transparent;
transform-origin: left;
animation: animate 2s linear infinite;
}
span:before{
content: "";
position: absolute;
width:16px;
height: 16px;
border-radius: 50%;
background: #FFF000;
top:-6px;
right: -8px;
box-shadow: 0 0 20px #FFF000;
}
@keyframes animateCricle
{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
@keyframes animate
{
0%{
transform: rotate(45deg);
}
100%{
transform: rotate(405deg);
}
}
HTML部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>预加载</title>
<link rel="stylesheet" type="text/css" href="demo1.css">
</head>
<body>
<div class="ring">
Loading
<span></span>
</div>
</body>
</html>
