Gauge

by SebastianPataneMasuelli

HTML

<div class="gauge">
    <div class="needle"></div>
</div>

CSS

.gauge { border: 1px solid red; width: 200px; height: 200px; border-radius: 100px;
    position: relative; }

.needle { width: 4px; height: 100px; background-color: red; position: absolute;
    top: 1px; left: 98px; 
    -moz-transform-origin:  1px 99px;
    -moz-transform: rotate(0deg);
    -moz-transition: all 1s ease-in;

}

.gauge:hover .needle {-moz-transform: rotate(-80deg); }

.mark { width: 60px; height: 1px; background-color: transparent;
position: absolute;
top: 98px; left: 98px; 
    border-right: 20px solid red;
    -moz-transform-origin:  0px 0px;
    text-align: right;
}

.rotate0 span { -moz-transform: rotate(180deg)} 
.rotate0 { -moz-transform: rotate(-180deg); }
.rotate45 { -moz-transform: rotate(-135deg); }
.rotate45 span { -moz-transform: rotate(135deg)} 
.rotate90 { -moz-transform: rotate(-90deg); }
.rotate90 span { -moz-transform: rotate(90deg); }
.rotate135 { -moz-transform: rotate(-45deg); }
.rotate135 span { -moz-transform: rotate(45deg); }
.rotate180 { -moz-transform: rotate(0deg); }
.rotate180 span { -moz-transform: rotate(0deg); }

JavaScript

var i, deg, mark = $('<div class="mark"></div>');
for (i = 0; i < 5; i++) {
    deg = 'rotate' + (45 * i);
    mark.clone().appendTo('.gauge').addClass(deg).html('<span>' + (45 * i) + '</span>');
}