@keyframes outer {
  0% { opacity: 0.3; }
  20% { opacity: 1; }
  100% { opacity: 0.3; }
}

@keyframes inner {
  0% { opacity: 0.4; }
  20% { opacity: 1; }
  100% { opacity: 0.4; }
}

@animationTime: 1000ms;
@outerTriangles: 19;
@animationDelay: @animationTime / @outerTriangles;

.loader {

  path {
    stroke: #000;
    stroke-width: 0;
    opacity: 0;
  }
}

.l1 { animation: outer @animationTime linear infinite; }
.l2 { animation: inner @animationTime linear infinite; }

.mixin-loop (@i) when (@i > 0) {
  .d@{i} {
    opacity: @i / @outerTriangles;
    animation-delay: @i * @animationDelay;
  }
  .mixin-loop(@i - 1);
}

.mixin-loop(@outerTriangles);