CSS3を駆使したプログレスバーのような物

README

CSS3を駆使したプログレスバーのような物。
プログレスバーと言うよりはただのメーター。グラディエーションとか角丸、影の練習用に。

jsdoit.css

* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background: #fdf;
  font: 30px sans-serif;
}

#progress {
    position : relative;
    background : -moz-linear-gradient(top, #dcdcdc, #808080); /* Firefox用 */ 
    background : -webkit-gradient(linear, left top, left bottom, from(#dcdcdc), to(#808080)); /* Safari,Google Chrome用 */
    background-clip: padding-box;
    width: 400px;
    height: 50px;
    padding : 5px;
    margin-left : auto;
    margin-right : auto;
    margin-top : 100px;
    border-radius: 10px;         /* CSS3草案 */  
    -webkit-border-radius: 10px; /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;    /* Firefox用 */
    -webkit-box-shadow: 5px 5px 5px #696969;
    -moz-box-shadow: 5px 5px 5px #696969;
}

#inner {
    background : -moz-linear-gradient(top, #696969, #c0c0c0, #696969); /* Firefox用 */ 
    background : -webkit-gradient(linear, left top, left bottom, from(#696969), color-stop(0.5,#c0c0c0), to(#696969)); /* Safari,Google Chrome用 */
    margin : 0px;
    width : 100%;
    height : 100%;
    border-radius: 5px;        　/* CSS3草案 */  
    -webkit-border-radius: 5px;　/* Safari,Google Chrome用 */  
    -moz-border-radius: 5px;   　/* Firefox用 */ 
}

#bar {
    background : -moz-linear-gradient(top, #90ee90, #006400); /* Firefox用 */ 
    background : -webkit-gradient(linear, left top, left bottom, from(#90ee90), to(#006400)); /* Safari,Google Chrome用 */
    height : 100%;
    margin-right : 100%;
    border-radius: 5px;        　/* CSS3草案 */  
    -webkit-border-radius: 5px;　/* Safari,Google Chrome用 */  
    -moz-border-radius: 5px;   　/* Firefox用 */ 
}

#button{
    width :  125px;
    height : 100px;
    margin-right : auto;
    margin-left : auto;
}

#button button{
    border : 2px solid #696969;
}

jsdoit.html

<div id="progress">
    <div id="inner">
        <div id="bar">
        
        </div>
    </div>
</div>

<div id="button">
    <button id="down" onclick="down()">
        10% down
    </button>

    <button id="up" onclick="up()">
        10% up
    </button>
</div>

jsdoit.js

$(document).ready(function(){
    var down = $('#down');
    var up = $('#up');
    
    var bar = $('#bar');
    
    var progress = 100;
    
    down.click(function(){
        if(progress < 100){
            progress += 10;
        }
        
        bar.css('margin-right',progress + "%");
    });
    
    up.click(function(){
        if(progress > 0){
            progress -= 10;
        }
        
        bar.css('margin-right',progress + "%");
    });
});