加载动态效果（8点圆形转）-4

<meta>
<title></title>

<style type="text/css">
.loader{
font-size: 20px;
width: 1em;
height: 1em;
border-radius: 50%;
position: relative;
text-indent: -9999em;
box-shadow: 0em 0em 0 .2em #fff,2em 1em 0 0 #fff,3em 3em 0 -0.5em #fff,2em 5em 0 -0.5em #fff,0 6em 0 -0.5em #fff,-2em 5em 0 -0.5em #fff,-3em 3em 0 -0.5em #fff,-2em 1em 0 0 #fff;
animation: load-effect 3s infinite linear;
-webkit-animation: load-effect 2s infinite linear;;
}
@keyframes load-effect{
0%,100%{
box-shadow: 0em 0em 0 .2em #fff,2em 1em 0 0 #fff,3em 3em 0 -0.5em #fff,2em 5em 0 -0.5em #fff,0 6em 0 -0.5em #fff,-2em 5em 0 -0.5em #fff,-3em 3em 0 -0.5em #fff,-2em 1em 0 0 #fff;
}
12.5%{
box-shadow: 0em 0em 0 0 #fff,2em 1em 0 0.2em #fff,3em 3em 0 0 #fff,2em 5em 0 -0.5em #fff,0 6em 0 -0.5em #fff,-2em 5em 0 -0.5em #fff,-3em 3em 0 -0.5em #fff,-2em 1em 0 -0.5em #fff;
}
25%{
box-shadow: 0em 0em 0 -0.5em #fff,2em 1em 0 0 #fff,3em 3em 0 0.2em #fff,2em 5em 0 0 #fff,0 6em 0 -0.5em #fff,-2em 5em 0 -0.5em #fff,-3em 3em 0 -0.5em #fff,-2em 1em 0 -0.5em #fff;
}
37.5%{
box-shadow: 0em 0em 0 -0.5em #fff,2em 1em 0 -0.5em #fff,3em 3em 0 0 #fff,2em 5em 0 0.2em #fff,0 6em 0 0 #fff,-2em 5em 0 -0.5em #fff,-3em 3em 0 -0.5em #fff,-2em 1em 0 -0.5em #fff;
}
50%{
box-shadow: 0em 0em 0 -0.5em #fff,2em 1em 0 -0.5em #fff,3em 3em 0 -0.5em #fff,2em 5em 0 0 #fff,0 6em 0 0.2em #fff,-2em 5em 0 0 #fff,-3em 3em 0 -0.5em #fff,-2em 1em 0 -0.5em #fff;
}
62.5%{
box-shadow: 0em 0em 0 -0.5em #fff,2em 1em 0 -0.5em #fff,3em 3em 0 -0.5em #fff,2em 5em 0 -0.5em #fff,0 6em 0 0 #fff,-2em 5em 0 0.2em #fff,-3em 3em 0 0 #fff,-2em 1em 0 -0.5em #fff;
}
75%{
box-shadow: 0em 0em 0 -0.5em #fff,2em 1em 0 -0.5em #fff,3em 3em 0 -0.5em #fff,2em 5em 0 -0.5em #fff,0 6em 0 -0.5em #fff,-2em 5em 0 0 #fff,-3em 3em 0 0.2em #fff,-2em 1em 0 0 #fff;
}
87.5%{
box-shadow: 0em 0em 0 0 #fff,2em 1em 0 -0.5em #fff,3em 3em 0 -0.5em #fff,2em 5em 0 -0.5em #fff,0 6em 0 -0.5em #fff,-2em 5em 0 0 #fff,-3em 3em 0 0 #fff,-2em 1em 0 0.2em #fff;
}
}
</style>


<div style="background: #4EA980; width: 200px;height: 200px;">

<div class="loader" style="margin-left: 4em">
loading...
</div>

</div>