<div id="battery" class="fa"></div>
<div id="time" class="fa"></div>
body{
	text-align: center;
	margin: 30px;
}
.fa{
	margin-bottom: 20px;
	display: block;
}
#battery, #time{
	font-size: 6em;
	color: #2ca8ff;
}
(function(){
	function animateIcon(id, code1, code2, code3, code4){
		const idSelector = document.getElementById(id);
	
		idSelector.innerHTML = code1;

		setTimeout(function(){
				idSelector.innerHTML = code2;
		}, 1000);

		setTimeout(function(){
				idSelector.innerHTML = code3;
		}, 2000);

		setTimeout(function(){
				idSelector.innerHTML = code4;
		}, 3000);
	}
	
	animateIcon("battery", "&#xf244", "&#xf243", "&#xf242", "&#xf240");
	animateIcon("time", "&#xf254", "&#xf251", "&#xf252", "&#xf253");
	
	setInterval(function(){
		animateIcon("battery", "&#xf244", "&#xf243", "&#xf242", "&#xf240");
	}, 4000);
	
	setInterval(function(){
		animateIcon("time", "&#xf254", "&#xf251", "&#xf252", "&#xf253");
	}, 4000);
	
})();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.