SOURCE

$recording = document.getElementById('recording');
$recording.addEventListener('click',function(){
  if ($recording.classList.contains('active')) {
  	$recording.classList.remove('active');
  } else {
    $recording.classList.add('active');
  }
});

/*
function recording() {
  if ($(.recording'').hasClass(active'')) {
    $(.recording'').removeClass(active'');
  } else {
  	$(.recording'').addClass(active'');
	}
}
*/

<i class="recording" id="recording"></i>

@keyframes recording1 {  	
	0% {				
		border-color: transparent;	
	}
	66% {		
		border-color: transparent;
	}		
	100% {				
		border-left-color: #000;
		border-right-color: #000;
	}
}

@keyframes recording2 {  		
	0% {
		border-color: transparent;		
	}
	33% {				
		border-color: transparent;	
	}			
	66% {								
		border-left-color: #000;				
		border-right-color: #000;			
	}
	100% {						
		border-left-color: #000;		
		border-right-color: #000;		
	}
}

@keyframes recording3 {  			
	0% {						
		border-color: transparent;		
	}				
	33% {										
		border-left-color: #000;						
		border-right-color: #000;					
	}	
	100% {								
		border-left-color: #000;				
		border-right-color: #000;				
	}
}

.recording {
	display: inline-block;
	position: relative;
	width: 50px;
	height: 50px;
	border: 2px solid #000;
	border-radius: 50%;
	box-sizing: border-box;
  cursor: pointer;
  transform: rotate(720deg);
  transition: all 1s linear;
}

.recording::after,
.recording::before {	
	content: '';	
	display: inline-block;	
	position: absolute;	
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;	
	box-sizing: border-box;	
	border: 2px solid transparent;	
	border-radius: 50%;	
  transition: all 1s linear;
}

.recording::before {
	width: 35px;
	height: 35px;
}

.recording::after {
	width: 20px;	
	height: 20px;	
  border-color: #000;
}

.recording.active {
  transform: rotate(0);
  animation: recording1 1.5s 1.1s infinite;
}

.recording.active::before {
  animation: recording2 1.5s 1.1s infinite;
}

.recording.active::after {
  animation: recording3 1.5s 1.1s infinite;
}

.recording.active,
.recording.active::before,
.recording.active::after {
  border-left-color: #000;
  border-right-color: #000;
  border-top-color: transparent;
  border-bottom-color: transparent
}