CssとJavaScriptでつくるゲージのUI

ほぼ仕事用のメモになるけど・・。

Html

<div class="gauge-wrapper">
	<div class="gauge-type1 gauge-inner" data-percent="40"></div>
</div>
<div class="gauge-wrapper">
	<div class="gauge-type2 gauge-inner" data-percent="98"></div>
</div>

Css

.gauge-wrapper {
	background-color: #000;
	height: 10px;
	position: relative;
	margin-bottom: 2px;
}
.gauge-inner {
	position: absolute;
	bottom: 1px;
	box-sizing: border-box;
	height: 8px;
	width: 0%;
	-webkit-transition: all .7s 1s ease;
}
.gauge-type1.gauge-inner {
	background: -webkit-gradient(linear,left bottom,right top,from(#F25500),to(#F89100));
	border: 1px inset #F25500;
}
.gauge-type2.gauge-inner {
	background: -webkit-gradient(linear,left bottom,right top,from(#165e83),to(#0094c8));
	border: 1px inset #274a78;
}

JavaScript

;(function(_win){
	_win.Gauge = (function(){
		var CLASS_NAME = '.gauge-inner',
			DATA_NAME  = 'data-percent',
		_exec = function(){
			var g = _win.document.querySelectorAll(CLASS_NAME);

			Array.prototype.forEach.call(g,function(elm){
				var w = parseInt(elm.getAttribute(DATA_NAME), 10);
				w = (w > 100) ? 100 : w;
				elm.style.width = w + '%';
			});
		};
		_win.addEventListener('load', _exec, false);
	}());
}(this));

メモ

ゲージの長さをstyle="width: 20%;"みたく直接定義すると、トランジションさせれないので、後からjsでどうにかする必要あり。

こういうパーツが集まったサービスとかないんかねー。