How to make an HP bar [code and tutorial]

by Fade Thu Apr 28, 2016 3:35 pm

This is actually pretty basic HTML that anyone can learn, I learned it after watching a YouTube tutorial on how to make something completely different. Needless to say the guy indirectly taught me how to do something that I thought was freakin' awesome! It's so easy in fact, that I decided I'd share it with you guys, since I plan on using it now. Smile

Code:: Health: <html> <body> <progress id="healthbar" value="100" max="100" style="width:300px;"></progress> </body> </html>

Health:

In the code above my value is at 100-- meaning my healthbar is maxed. I haven't taken damage yet in the RP, woot! Now, after getting slapped around by my enemy to the point I'm half beaten I can easily make this bar change. I just have to make my value 50 and poof, the code will change the bar to this. It's fucking cyber magic dudes.

Health:

If you want to change the length of your bar as a whole, just change the width, it's easy as pie. By changing my width from 300px, to 100px I end up with the bar below.

Health:

Health:

No credit needed guys, take it as you want it. Just remember who it was that taught you if anyone ever asks. Enjoy!

Hi there! I figured I'd place this here for anyone interested since I noticed this could also fit MH's DP and MP guages for anyone who might want to use it, hope you guys like it aye.~

by Fade Thu Apr 28, 2016 3:51 pm

Also, if you make your value like higher-- as in say, 300, it fixates how damaging an ability can really be. So if I were like, T3 getting hit by a T1 fireball and I have a T3 END I probably got hit with -10, but my actual health pool is 300, so it didn't hurt me much. Which is a pretty good guage imo, Idk, anyways, yeah. I'm unsure how exactly it'd work here, though the HP concept is really interesting me. Hopefully you find this just as cool as I do. Personally I thought it was awesome. Lol.

by Professor Velox Thu Apr 28, 2016 4:34 pm

Neat.

by **Faye** Thu Apr 28, 2016 8:34 pm

That's Nifty.

by Lenneth Thu Apr 28, 2016 11:03 pm

cool, is there a code for different colors for different resource pools?

by Fade Thu Apr 28, 2016 11:43 pm

I tried looking into that, but I couldn't find out how. Maybe it's not a style, but some other thing that needs to be put in there. I looked though, and no luck unfortunately.

by Sponsored content

How to make an HP bar [code and tutorial]

How to make an HP bar [code and tutorial]

Re: How to make an HP bar [code and tutorial]

Re: How to make an HP bar [code and tutorial]

Re: How to make an HP bar [code and tutorial]

Re: How to make an HP bar [code and tutorial]

Re: How to make an HP bar [code and tutorial]

Re: How to make an HP bar [code and tutorial]