.ui-progress-bar-container
{
    position: relative;
    height: 11px;
}
.ui-progress-bar
{
    position: absolute;
    top: 2px;
    left: 29px;
    right: 0; /* Usual setup stuff */
    height: 8px;
    margin: 0 3px;
    background-color: #CCCCCC; 
    border-radius: 35px;
    -moz-border-radius: 35px;
    -webkit-border-radius: 35px; 
    overflow: hidden;
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #EEEEEE), color-stop(1, #CCCCCC)); 
    background: -moz-linear-gradient(#CCCCCC 0%, #EEEEEE 90%); 
    -webkit-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px #FFF;
    -moz-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px #FFF;
    box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px #FFF;
}

/* Progress part of the progress bar */
.ui-progress
{
    /* Usual setup stuff */
    position: relative;
    display: block;
    left: 0;
    overflow: hidden;
    width: 0%; /* Height should be 2px less than .ui-progress-bar so as to not cover borders and give it a look of being inset */
    height: 6px; /* Rounds the ends, we specify an excessive amount to make sure they are completely rounded */ /* Adjust to your liking, and don't forget to adjust to the same amount in .ui-progress-bar */
    -moz-border-radius: 35px;
    -webkit-border-radius: 35px;
    border-radius: 35px; /* Set the background size so the stripes work correctly */
    -webkit-background-size: 44px 44px; /* Webkit */ /* For browser that don't support gradients, we'll set a blanket background colour */
    background-color: #84ccff; /* Webkit background stripes and gradient */
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #84ccff),color-stop(0.3, #84ccff), color-stop(1, #84ccff)); /* Mozilla (Firefox etc) background stripes */ /* Note: Mozilla's support for gradients is more true to the original design, allowing gradients at 30 degrees, as apposed to 45 degress in webkit. */
    background: -moz-linear-gradient(#84ccff 0%,#84ccff 30%, #84ccff 100%); /* Webkit embossing */
    -webkit-box-shadow: inset 0px 1px 0px 0px #a1d8ff, inset 0px -1px 1px #3baefe; /* Mozilla embossing */
    -moz-box-shadow: inset 0px 1px 0px 0px #a1d8ff, inset 0px -1px 1px #3baefe; /* IE9 and Opera embossing */
    box-shadow: inset 0px 1px 0px 0px #a1d8ff, inset 0px -1px 1px #3baefe; /* Give it a higher contrast outline */
    border: 1px solid #0096FF; /* Webkit magic */
    -webkit-animation: animate-stripes 5s linear infinite; /* TODO: Wait for Mozilla to support animation, then implement */
}

/* Progress indicator text */
.ui-progress-label
{
    position: absolute;
    display:block;
    top: 1px;
    left: 0;
    font-size: 9px;
    vertical-align: top;
    width: 26px;
    font-family: Arial;
    text-align: right;
    line-height: 8px;
    padding-right: 5px;
    color: rgba(0,0,0,0.6);
    text-shadow: rgba(200,200,200, 0.45) 0 1px 0px;
    white-space: nowrap;
}