@c: 100;
@deg: 360deg/@c;
@color: hsla(80, 67%, 100%, .7);
.populate(@i, @offset) when (@i > 0) {
.populate((@i - 1), @offset);
box-shadow+: cos(@i * -@deg)*@offset sin(@i * -@deg)*@offset 0px 0px fadeout(@color, (alpha(@color)/@c)*(@i*1.11)*100%);
}
.populate_rev(@i, @offset) when (@i > 0) {
.populate_rev((@i - 1), @offset);
box-shadow+: cos(@i * @deg)*@offset sin(@i * @deg)*@offset 0px 0px fadeout(@color, (alpha(@color)/@c)*(@i*1.17)*100%);
}
body{
overflow: hidden;
background-color: hsla(151, 69%, 33%, 1);
&:after {
content: "";
background-color: ;
width: .5em;
height: .5em;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
border-radius: 50%;
.populate(@c, 30px);
animation: rotate 1.23s linear infinite reverse;
}
&:before {
content: "";
background-color: ;
width: .2em;
height: .2em;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
border-radius: 50%;
.populate_rev(@c, 38px);
animation: rotate .77s linear infinite;
}
}
@keyframes rotate {
from {transform: rotate(360deg);}
to {transform: rotate(0deg);}
}
Just an experiment with a pure two-in-one CSS loader. Check it out at http://codepen.io/nevnev/pen/MaMEMJ
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.