me

def Progress Bars using css

posted_by :Amos, :on => 'December 6th, 2006'

I spend a little time trying to get css to make a progress bar for me. It took some thought and time, but everything worked out well. I thought I would put it here for everyone to see.

The CSS 


.prog-empty {
  width: 400px;
  height: 15px;
  background: #247;
  padding: 0;
  margin: 20px;
  border: 5px;
}

.prog-bar {
  height: 15px;
  background: #f70;
  padding: 0;
  margin: 0;
}

The html 


< div class="prog-empty">
  < div class="prog-bar" style="width: 63%">
  </div>
</div>

Now the width percentage needs to be replaced with a function. With the exact code from above I get something like:

I hope everyone can find this useful. Remember that you can use url("image.file") in place of the colors.

tags = %w( html )
{ |it| digg it }
self.add_to_delicious

end

end