Simple Number/ProgressBar Indicator

by rastrano

HTML

<span class='progressbackground200'>
    <span style="width:50%;" class='progressvalue200'>20</span>
 </span>

CSS

.progressbackground200{
 /* background-image: linear-gradient(0deg,rgb(0,100,0),rgb(200,0,0));
  background-image: -moz-linear-gradient(0deg,rgb(0,100,0),rgb(200,0,0));
     background-image: -webkit-linear-gradient(0deg,rgb(0,100,0),rgb(200,0,0));
     background-image: -o-linear-gradient(0deg,rgb(0,100,0),rgb(200,0,0));
     background-image: -ms-linear-gradient(0deg,rgb(0,100,0),rgb(200,0,0));
    */
   float:left; /* if you comment this width is not imposed */ 
                margin-right:-1px;
                width:200px;
                line-height:1;
                text-align:center;    
               
             /*   border:1px solid #666; */
    
                -webkit-box-shadow:inset -1px 0 1px rgba(255, 255, 255, 0.2), inset 1px 0 1px rgba(255, 255, 255, 0.2), inset 0 0 15px rgba(255, 255, 255, 0.2);
                -moz-box-shadow:inset -1px 0 1px rgba(255, 255, 255, 0.2), inset 1px 0 1px rgba(255, 255, 255, 0.2), inset 0 0 15px rgba(255, 255, 255, 0.2);
                box-shadow:
                    inset -1px 0 1px rgba(255, 255, 255, 0.2),
                    inset 1px 0 1px rgba(255, 255, 255, 0.2),
                    inset 0 0 15px rgba(255, 255, 255, 0.2);
                text-shadow:
                    0 2px 3px #333,
                    0 -1px 1px #333;
}

.progressbackground200:first-child {
                border-radius:5px 0 0 5px;
 }

.progressbackground200 > span {
              color:white;
              float:left;
    clear:none;
              /*margin-left: 4px;*/
    overflow:hidden;
    background-image:-moz-linear-gradient(10% 0% 16deg,#2AAB16, #C9141A, #C7C7C7 100%)
 }