Bouncing Chameleon Spinner - LessHat version!

elements.html

<div class="spinner">
  <div class="element1"></div>
  <div class="element2"></div>
</div>

spinner.less

.spinner 
{
  .element1, 
  .element2 
  {
    position: absolute;
    top: 0;
    left: 0;
      
    width: 100%;
    height: 100%;
      
    .border-radius(50%);
    .opacity(0.66);
  
    .animation(bounce 2s infinite ease-in-out, colorwheel 5s infinite ease-in-out);
  }

  .element2
  {
    .animation-delay(1s, -2s);
  }
}

.keyframes(~'bounce, 0%, 100% { transform: scale(0.0); } 50% { transform: scale(1.0); }');
.keyframes(~'colorwheel, 0%, 100% { background-color: @{red}; } 20% { background-color: @{orange}; } 40% { background-color: @{yellow}; } 60% { background-color: @{green}; } 80% { background-color: @{blue}; }');