Two-in-One CSS Loader

@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.