SOURCE

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

/**
 * recording animation
 */

@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 transparent;
	border-radius: 50%;
	animation: recording1 2s infinite;
	box-sizing: border-box;
}

.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%;	
}

.recording::before {
	width: 35px;
	height: 35px;
	animation: recording2 2s infinite;
}

.recording::after {
	width: 20px;	
	height: 20px;	
	animation: recording3 2s infinite;
}