@keyframes hideshow { 0% { opacity: 0; } 10% { opacity: 1; } 100% { opacity: 0; } } @keyframes inner { 0% { opacity: 0; } 10% { opacity: 1; } 100% { opacity: 0; } } @animationTime: 750ms; @outerTriangles: 19; @animationDelay: @animationTime / @outerTriangles; .loader { path { stroke: #000; stroke-width: 0; opacity: 0; } } .l1 { animation: hideshow @animationTime linear infinite; } .l2 { animation: inner @animationTime linear infinite; } .mixin-loop (@i) when (@i > 0) { .d@{i} { animation-delay: @i * @animationDelay; } .mixin-loop(@i - 1); } .mixin-loop(@outerTriangles);