Sonar Animated

style.less

.sonar {
  display: block;
  width: 200px;
  height: 200px;
  box-sizing: border-box;

  position: absolute;
  top: 200px;
  left: 200px;

  @color: mix(@main, @bg);

  background-color: transparent;

  border: 1px solid @color;
  border-radius: 50%;

  overflow: hidden;

  transform: translate3d(0,0,0);

  &:before {
    content: '';

    display: block;
    width: 50%;
    height: 50%;
    box-sizing: border-box;
    margin-top: 50%;

    background-color: @T;
    background-image: radial-gradient(ellipse 100% 100% at 0 0,
      fade(@color, 60%) 0%, fade(@color, 0) 100%);

    border-top: 1px solid @color;

    transform: rotate(0);
    transform-origin: 100% 0;

    animation-duration: 3s;
    animation-name: rotor;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }
}

@keyframes rotor {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg)
  }
}