Custom Upload Progress Bar

vrijvlinder

If you want to customize your progress bar for your file upload you can use this css I made and attach the image I made for my own but it gives you an idea about size and stuff. You can use any animated image you want.
Just add this to your custom.css file.

.UploadProgress {
margin: 10px 0;
background:url(images/upload-progress-back1.gif)!important;
width: 200px;
height:39px;
z-index: 0;
color: #fff;
text-shadow: 0 1px 1px #000;
border: 1px solid #666;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
font-size: 14px;
}
div.AttachFileWrapper table.AttachFileContainer tr.FileAttachment td div.ProgressBar {
   width: 126px;
   border: 2px solid gray;
   background-color:transparent;
   height:39px;
   background url(images/upload-progress-back1.gif)!important;
   border: 0px;
font-size: 14px;
}
div.AttachFileWrapper table.AttachFileContainer tr.FileAttachment td div.ProgressBar div.ProgressTicker {
   height:39px;
   background-color:transparent;
   background:url(images/upload-progress-back1.gif)!important;
   line-height: 14px;
   font-size: 14px;
   color: #fff;
   padding-right: 2px;
   text-align: right;
}

vrijvlinder

here is a couple more I made

422

vrijvlinder

very cool trick !

vrijvlinder

this is for the steampunk crowd

vrijvlinder

Ah ! I'm on a roll

BrandonP

Really Cool!

vrijvlinder

I like gears and machines so here is a very cool one