Super simple CSS bars

Posted by tobi — 12:41 PM Aug 22

I needed some simple progress bars in a html table to indicate the progress of string translations in the new internationalizeable checkout process of Shopify and found an elegant CSS solution:

Html: 

<div class="progress-container">          
    <div style="width: 95%"></div>
</div>
Stylesheet: 

div.progress-container {
  border: 1px solid #ccc; 
  width: 100px; 
  margin: 2px 5px 2px 0; 
  padding: 1px; 
  float: left; 
  background: white;
}

div.progress-container > div {
  background-color: #ACE97C; 
  height: 12px
}

Which ends up looking like this:

Comments

  • Mat 22 Aug 14:08

    Brilliant, thanks for this. Easy way to generate statistics in a graph using CSS rather than JS/PHP GD (though they can generate pie charts/line graphs), but this is still awsome for simple ones.

  • Brian 22 Aug 16:12

    Awesome. I tweaked it and it works great for vertical bars too, though it requires some `position` CSS when you want to make the bar start from the bottom and not hang from the top on the container.

    You might want to remove the duplicate width: 100px from the HTML and ditch the child selector, since it’s unnecessary and confuses poor lil’ IE6.

  • css 22 Aug 17:23

    Nice very nice creative. I like it alot great work. Also menus are alot eaiser to make with css. I have free css at my blog to make one.

  • Rodrigo Kochenburger 22 Aug 17:27

    Is there any reason why you’ve defined “width: 100px;” in both, progress-container class and inline? Its really nice, btw :)

  • Tom 22 Aug 17:38

    This is great. Very elegant. The only qualm I have is accessability; the empty divs mean nothing semantically. Maybe you could use a streched image inside it instead of another div – that way you could add an alt tag with the percentage in.

  • Tobi 22 Aug 20:01

    I included the width: 100px to show that you can override this from your html and don’t have to stick with the default of the CSS. It does look redundant though.

    Tom: To a screen reader this is invisible and I think this is actually the perfect situation. Such bars are usually a visual clue accompanied by an actual percentage right behind it.

  • topfunky 23 Aug 11:25

    A few months ago I put together a small plugin that gives you some other CSS graph options. Much easier than bitmap-based graphs!

    http://nubyonrails.com/pages/css_graphs

  • Thomas Aylott 24 Aug 17:13

    Yeah, we use CSS graphs in the overlay panels on CrazyEgg. http://www.crazyegg.com/

    The original design for ours were done by Apples to Oranges http://applestooranges.com/blog/post/css-for-bar-graphs/

    There are a few more places that they might start popping up.

    I have an alternate version of this that uses background images instead of nested tags. Very handy for table cells, but you have to use an absolute width :(

  • Arthur Zapparoli 02 Sep 03:10

    Nice CSS bars!

  • Miranda 03 Sep 14:05

    Great! I like it!

  • Benjamin Gorlick 06 Sep 05:39

    Very nicely done there. Those could definetely be used for minamlistic graphing.

  • Jason Bellows 08 Sep 02:14

    Looks great in Firefox but the green does not show up in IE6. Just thought you might want to know.

  • Funbug 12 Sep 16:53

    Nice, but there is one big problem, at least for me: it is not printable.

  • tobi 14 Sep 19:26

    You are right. I wonder what would be the best way to make those printable.

    Probably one of those dreaded 1px graphic hacks :(

Commenting are now closed…