简单菊花加载图css动画实现

效果：

/* less函数优化 */
@size: 50px;
@circletime: 4s;
@loaderbg: bg; /* 自行命名背景类 */
@loaderline: line; /* 自行命名白点类 */

.loader-child(@n, @i: 1) when (@i =< @n) {
   
    &:nth-child(@{
   i}) {
   
        transform: rotate(45deg*@i) translate(-(@size*0.32));
    }

    .loader-child(@n, (@i + 1));
}

.loader-circle(@n, @i: 9, @color: rgb(37, 37, 37)) when(@i =< @n) {
   
    &:nth-child(@{
   i}) {
   
        background-color: @color * ((@i)-8) * 1.2;
        left: @size*0.08;
        transform-origin: @size*0.42;
        animation: move @circletime steps(8) ((@i)-9)*(@circletime/8) infinite;
    }

    .loader-circle(@n, (@i + 1)