Simple Number/ProgressBar Indicator

by rastrano

HTML

<span style="width:20px" class='progressbackground200'>
    <span  class='progressvalue200'>&nbsp;</span>
</span>
<span class="progressbackgroundlabel">20</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));
    visibility:visible;
   float:left; /* if you comment this width is not imposed */ 
                margin-right:-1px;
                width:200px;
    height:1.2em;
                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;
     background-size: 200px;
 -o-background-size: 200px;
 -moz-background-size: 200px;
 -webkit-background-size: 200px;
    background-repeat:no-repeat;


}

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

.progressbackground200 > span.progressvalue200 {
    color:white;
    float:left;
    clear:none;
    margin-left: 4px;
    overflow:visible;
    visibility:visible !important;
    background-image:inherited;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
  /*  text-overflow: ellipsis; */
 }
 span.progressbackgroundlabel {
    position:absolute;
    left:10px;
    width:100%;
    text-shadow:
      ...