[Cyril]

Div in a div, inner div with a width in %, and some styling. Border-radius for the corners.

[gibbonweb]

<div class="wrapper">
    <div class="bar" style="width: 65%">65/100 HP</div>
</div>

start with a simple style like:

.bar {
    background: red;
    height: 1em;
    overflow: visible;
    color: white
}

Ah what the heck, check this out: http://tinkerbin.com/3HRHWOYp

further styling can of course be done with a background-image for

.bar

, rounded corners, et cetera!

[Nand]

Or you could just use two images.

<img src="white.png" style="height:15px;width: 20px" />
<img src="black.png" style="height:15px;width: 80px" />

You can even wrap a div element around it if you want to specify percentages.

[Hyde]

Nand, on 10 March 2012 - 10:57 AM, said:

Or you could just use two images.

<img src="white.png" style="height:15px;width: 20px" />
<img src="black.png" style="height:15px;width: 80px" />

You can even wrap a div element around it if you want to specify percentages.

Gah! Inline CSS! Run for your life!

[Cyril]

Slightly more styled version of Gibb's: http://tinkerbin.com/IMnG73fR
@Nand, using images isn't great to start with, this is even worth. Working with that is going to be messy and if you're making something integrated into a backend, you'll have to have twice the code needed to display.

Edit: @Hyde, inline CSS is fine for things like this. Normal styling should be in CSS, but things like this are fine. (that is, inline width, in percentages for example, to serve as a health bar)

[gibbonweb]

Hyde, on 10 March 2012 - 11:22 AM, said:

Gah! Inline CSS! Run for your life!

so.... YOU would so something like

.width1 {width: 1%; }
.width2 {width: 2%; }
.width3 {width: 3%; }
.width4 {width: 4%; }
.width5 {width: 5%; }
.width6 {width: 6%; }

until 100?

[iCyan]

Isn't wdR awesome? Very helpfull
You should also make it so that the bar changes colour to yellow and red when at lower healths. Add that extra touch of awesome

[Cyril]

iCyan, on 10 March 2012 - 12:50 PM, said:

Isn't wdR awesome? Very helpfull
You should also make it so that the bar changes colour to yellow and red when at lower healths. Add that extra touch of awesome

http://tinkerbin.com/8pyvjFDb

[TheEmpty]

gibbonweb, on 10 March 2012 - 12:25 PM, said:

so.... YOU would so something like

.width1 {width: 1%; }
.width2 {width: 2%; }
.width3 {width: 3%; }
.width4 {width: 4%; }
.width5 {width: 5%; }
.width6 {width: 6%; }

until 100?

$('#bar1').width('5%');

Cyril, on 10 March 2012 - 12:54 PM, said:

http://tinkerbin.com/8pyvjFDb

Fixed: http://tinkerbin.com/Kydq51s9

[Cyril]

ThatRailsGuy, on 10 March 2012 - 12:55 PM, said:

Fixed: http://tinkerbin.com/Kydq51s9

Eh? You didn't change anything.

[TheEmpty]

Cyril, on 10 March 2012 - 12:58 PM, said:

Eh? You didn't change anything.

text @ 3rd

[Cyril]

ThatRailsGuy, on 10 March 2012 - 01:31 PM, said:

text @ 3rd

Yes...? It's correct?

[TheEmpty]

Cyril, on 10 March 2012 - 01:35 PM, said:

Yes...? It's correct?

It wasn't.

[Cyril]

ThatRailsGuy, on 10 March 2012 - 02:32 PM, said:

It wasn't.

Well considering the one you quoted is right... :/

[gibbonweb]

ThatRailsGuy, on 10 March 2012 - 12:55 PM, said:

$('#bar1').width('5%');

so just to avoid one line of (justifiable) inline css you'd include jQuery?


HOW EFFICIENT

[Cyril]

gibbonweb, on 10 March 2012 - 05:21 PM, said:

so just to avoid one line of (justifiable) inline css you'd include jQuery?


HOW EFFICIENT

Mind you, jQuery would translate that to inline CSS anyway.

[TheEmpty]

gibbonweb, on 10 March 2012 - 05:21 PM, said:

so just to avoid one line of (justifiable) inline css you'd include jQuery?


HOW EFFICIENT

I've never worked with an app that didn't have jQuery in it. It would be just as easy to do that in basic JS too.

[Renegade]

Even more stylized version: http://tinkerbin.com/6eZsZfe6

Warning: It is extremely painful watching that moving progress bar.

[TheEmpty]

Renegade, on my W7 Chrome the stripes don't line up on repeat, but nice lookin'