Código de exemplo da utilização da API de bateria do HTML5 Fonte de estudo: http://loopinfinito.com.br/2013/03/21/battery-api/ (por já ter css e tudo)

gistfile1.js

$(document).ready( function(){

	var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery || navigator.msBattery || navigator.oBattery
	// var battery = null

	$charge = $('.charge')

	battery ? supported() : unsupported()

	function supported(){

		var width = 350
		var animationDuration = 1 // sec
		var level = battery.level
		// level = 0.7
		var levelWidth = width * level
		var levelAnimationDuration = animationDuration * level
		var colorClass = 'green'

		if( level < 0.2 ) colorClass = 'red'
		else if( level < 0.5 ) colorClass = 'yellow'

		$('.progress').animate({
			'width': levelWidth
		}, {
			duration: levelAnimationDuration * 1000,
			easing: 'linear',
			progress: function( animation, prog, remain ){
				prog = parseInt(prog * 100 * level)
				if( prog >= 0 && prog <= 100 ) $charge.text( prog + '%' )
			}
		}).css({
			'transition-duration': levelAnimationDuration + 's',
			'-webkit-transition-duration': levelAnimationDuration + 's',
			'-moz-transition-duration': levelAnimationDuration + 's',
			'-ms-transition-duration': levelAnimationDuration + 's',
			'-o-transition-duration': levelAnimationDuration + 's'
		}).removeClass('red').addClass( colorClass )

		if( battery.charging )
			$('.energy').show()

		else if( battery.dischargingTime == 'Infinity' )
			$('.plug').show()
	}

	function unsupported(){
		$charge.addClass('unsupported').text('seu navegador não tem suporte')
	}


});

gistfile2.html

<div class="battery">
	<div class="anode"></div>
	<div class="lifespan">
		<div class="progress red"></div>
		<div class="charge">0%</div>
		<div class="energy"></div>
		<div class="plug"></div>
	</div>
	<div class="cathode"></div>
</div>

gistfile3.css

* {
		margin: 0;
		padding: 0;
	}
	body {
		background: #0085B2;
		font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	}
	.battery {
		width: 386px;
		height: 216px;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -108px;
		margin-left: -193px;
	}
	.anode,
	.cathode {
		background: #26588E;
		width: 16px;
		height: 216px;
		float: left;
	}
	.cathode::after {
		content: '';
		display: block;
		width: 16px;
		height: 72px;
		background: #26588E;
		position: relative;
		top: 50%;
		margin-top: -36px;
		left: 16px;
	}
	.lifespan {
		width: 350px;
		height: 216px;
		float: left;
		background: #316B8B;
		margin: 0px 2px;
		overflow: hidden;
	}
	.progress {
		position: absolute;
		width: 0px;
		height: 216px;
		-webkit-transition: background-color 1s linear;
		-moz-transition: background-color 1s linear;
		-ms-transition: background-color 1s linear;
		-o-transition: background-color 1s linear;
		transition: background-color 1s linear;
	}
		.progress.green {
			background: #2DB200;
		}
		.progress.yellow {
			background: #D9D900;
		}
		.progress.red {
			background: #D93600;
		}
	.charge {
		position: absolute;
		width: 350px;
		height: 216px;
		line-height: 216px;
		text-align: center;
		font-size: 56px;
		color: white;
		font-weight: 100;
		letter-spacing: -0.03em
	}
	.charge.unsupported {
		padding: 52px 0px;
		font-size: 46px;
		line-height: 56px;
		color: #bbb;
	}
	.energy,
	.plug {
		position: absolute;
		width: 40px;
		right: 25px;
		bottom: 8px;
		opacity: 0.2;
		display: none;
		-webkit-animation: charging 1s ease alternate infinite;
		-moz-animation: charging 1s ease alternate infinite;
		-ms-animation: charging 1s ease alternate infinite;
		-o-animation: charging 1s ease alternate infinite;
		animation: charging 1s ease alternate infinite;
	}
	.energy {
		height: 23px;
		background: url(energy.png);
	}
	.plug {
		height: 19px;
		background: url(plug.png);
	}

	@-webkit-keyframes charging {
		from  { opacity: 0.3 }
		to { opacity: 0.1 }
	}
	@-moz-keyframes charging {
		from  { opacity: 0.3 }
		to { opacity: 0.1 }
	}
	@-ms-keyframes charging {
		from  { opacity: 0.3 }
		to { opacity: 0.1 }
	}
	@-o-keyframes charging {
		from  { opacity: 0.3 }
		to { opacity: 0.1 }
	}
	@keyframes charging {
		from  { opacity: 0.3 }
		to { opacity: 0.1 }
	}