<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
<title></title>
<style>
html{
font-size: 75px;
}
.dd{
position: relative;
display: inline-block;
width: 70px;
height: 70px;
overflow: hidden;
margin: 100px;
/*animation: spin 1s infinite steps(8);*/
}
.d:before,.d:after,.dd:before,.dd:after{
content: '';
position: absolute;
top: 0px;
left: 33px;
width: 4px;
height: 20px;
border-radius: 1px;
box-shadow: 0 50px rgba(21, 126, 230, 0.5);
/*-webkit-transform-origin: 50% 22px;*/
transform-origin: 50% 35px;
background: red;
}
.d{
/*width: 80px;*/
/*height: 80px;*/
}
.d:before{
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.d:after{
-webkit-transform: rotate(-135deg);
transform: rotate(-90deg);
}
.dd:after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
@keyframes spin{
to{
-webkit-transform:rotate(1turn);
transform:rotate(1turn)
}
}
.pl-loading {
position: relative;
display: inline-block;
width: .36rem;
height: .36rem;
overflow: hidden;
/*-webkit-animation: spin 1s infinite steps(8);*/
/*animation: spin 1s infinite steps(8);*/
}
.pl-loading:after, .pl-loading:before, .pl-loading>div:after, .pl-loading>div:before {
content: '';
position: absolute;
top: 0;
left: .16rem;
width: .04rem;
height: .12rem;
border-radius: .02rem;
box-shadow: 0 0.24rem rgba(150,153,156,.5);
/*-webkit-transform-origin: 50% .18rem;*/
transform-origin: 50% .18rem;
background: #96999c;
}
.pl-loading>div:before {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.pl-loading>div:after {
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.pl-loading:after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
</style>
</head>
<body>
<div class="dd">
<div class="d"></div>
</div>
<div>
<div class="pl-loading">
<!--<div></div>-->
</div>
</div>
</body>
</html>
