Cacher is the code snippet organizer for pro developers

@D: 60px;   // size control // diametro
@R: (@D/2); // radio
@B: (@R/6);
@O: 0.7;    // opacity
@A: 2s;     // accelerate

.trigger { position: relative; background: transparent; width: @D; height: @D; margin-left: -@R; margin-top: -@R; border: 0; outline: none; cursor: pointer;
  &:after, &:before { content:""; border-radius: 100%; position:absolute; top: 0; left: 0; width: 100%; height: 100%; transform-origin: center center; }

  &:after{
    box-shadow: inset 0 @B 0 rgba(250, 250, 0, @O),
                inset @B 0 0 rgba(250, 200, 0, @O),
                inset 0 -@B 0 rgba(250, 150, 0, @O),
                inset -@B 0 0 rgba(250, 100, 0, @O);
    animation: rotar @A -0.5s linear infinite;
  }

  &:before{
    box-shadow: inset 0 @B 0 rgba(0, 250, 250, @O),
                inset @B 0 0 rgba(0, 200, 200, @O),
                inset 0 -@B 0 rgba(0, 150, 200, @O),
                inset -@B 0 0 rgba(0, 200, 250, @O);
    animation: rotarIz @A -0.5s linear infinite;
  }

  @keyframes rotar{
    0%   { transform:rotateZ(0deg) scaleX(1) scaleY(1); }
    50%  { transform:rotateZ(180deg) scaleX(0.82) scaleY(0.95); }
    100% { transform:rotateZ(360deg) scaleX(1) scaleY(1); }
  }

  @keyframes rotarIz{
    0%   { transform:rotateZ(0deg) scaleX(1) scaleY(1); }
    50%  { transform:rotateZ(-180deg) scaleX(0.95) scaleY(0.85); }
    100% { transform:rotateZ(-360deg) scaleX(1) scaleY(1); }
  }
  
  span { color: #FFF; }
}