Untitled

dabblet.css

html,body {
	height: 100%;
}
body:before {
	content: '';
	height: 100%;
	display: inline-block;
	vertical-align: middle;
}
meter {
	width: 100%;
	height: 3em;
	display: inline-block;
	vertical-align: middle;
}

dabblet.html

<meter value=".7" high=".8"></meter>

dabblet.js

function transitionTo(meter, newVal) {
	var transitionSpeed = (newVal - meter.value)/100;
	if (meter.isTransitioning) {
		meter.cancelCurrentTransition = true;
	} else {
		meter.isTransitioning = true;
	}
	function transitionFrame(speed) {
		return function() {
			var curVal = parseFloat(meter.value);
			if (Math.abs(curVal - newVal) > 1.0e-3 && !meter.cancelCurrentTransition) {
				meter.value += speed;
				window.requestAnimationFrame(transitionFrame(speed));
			} else if (meter.cancelCurrentTransition) {
				meter.cancelCurrentTransition = false;
			} else {
				meter.isTransitioning = false;
			}
		}
	}
	window.requestAnimationFrame(transitionFrame(transitionSpeed));
}

var meter = document.querySelector('meter');
meter.addEventListener('mouseenter', function() {
	transitionTo(meter, .9);
});

meter.addEventListener('mouseleave', function() {
	transitionTo(meter, .7);
});

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}