Responsive XP Bar

Unknown

So, for those who would like to grab one of these for their own pages I have cobbled together a responsive (will adjust dynamically based on width of the viewer) XP Bar that does not use any images, just CSS and a little HTML on the page is all so it is pretty good about load times. I have also included some fallbacks on it for as much browser support as possible. This is posted up on my Campaign site with a few other interesting CSS goodies, but I figured I would kick it up here for folks as well (since there is a good chance you may not have been to my page and my CSS is getting kind of massive at this point since I am getting various responsive fallbacks in place). Here are the details:

*CSS:*

/* CSS ONLY XP BAR */
.graph {
width: 75%;
height: 30px;
margin-left: auto;
margin-right: auto;
border: 1px solid #888;
/* FALLBACK */
background-color: #CCC;
/* SAFARI 4, CHROME 1-9, IOS 3.2-4.3, ANDROID 2.1-3.0 */
-webkit-gradient(linear, left top, right top, from(#A8A8A8), to(#CCC));
/* SAFARI 5.1, IOS 5.0-6.1, CHROME 10-25, ANDROID 4.0-4.3 */
background-image: -webkit-linear-gradient(left, #A8A8A8, #CCC);
/* FIREFOX 3.6 - 15 */
background-image: -moz-linear-gradient(center top, #A8A8A8, #CCC);
/* OPERA 15+, CHROME 25+, IE 10+, FIREFOX 16+, SAFARI 6.1+, IOS 7+, ANDROID 4.4+ */
background-image: linear-gradient(to right, #A8A8A8, #CCC);
position: relative;
}

.bar {
height: 29px;
/* FALLBACK */
background-color: red;
/* SAFARI 4, CHROME 1-9, IOS 3.2-4.3, ANDROID 2.1-3.0 */
-webkit-gradient(linear, left top, right top, from(darkred), to(red));
/* SAFARI 5.1, IOS 5.0-6.1, CHROME 10-25, ANDROID 4.0-4.3 */
background-image: -webkit-linear-gradient(left, darkred, red);
/* FIREFOX 3.6 - 15 */
background-image: -moz-linear-gradient(left, darkred, red);
/* OPERA 15+, CHROME 25+, IE 10+, FIREFOX 16+, SAFARI 6.1+, IOS 7+, ANDROID 4.4+ */
background-image: linear-gradient(to right, darkred, red);
}

.xpValue {
position: absolute;
text-align: center;
width: 100%;
margin: 0px;
line-height: 30px;
}

/* END XP BAR */

*HTML:*

@Current XP / Level XP@

You just adjust the inline width % to fill in a percentage of the bar as the players gain XP. If you want you can also give the bar rounded ends by adding the following.

*CSS:*

/* ROUNDED CORNERS */
.round {
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
-khtml-border-radius:10px
}

*Modified HTML:*

@Current XP / Level XP@

Again you would still just modify the inline width on the div. Obviously on both you would replace the Current XP with how much XP the character has and Level XP with the amount needed to get to the next level. Other than XP this could have some other applications on pages as well, so feel free to get creative with it. Additionally you can play with some of the CSS on this to do some styling of the bar itself, I have it commented fairly well so you can get an idea of what is going on. If you want to see the bar in action take a look at one of the PC pages on my Campaign as I have replaced my old image based bar with this now. Being responsive you can adjust the width of your browser and the bar will adjust on the fly with it.

--
Alex
"Dragon Age: Requiem":https://dragon-age-requiem.obsidianportal.com/

ketherian

Very cool.
Thank you for this.

-
Ketherian
"Signs & Portends":https://swtwc.obsidianportal.com

ikabodo

I have a version of this of my own.

A tip could be to use:
@style="width:calc(20061 / 32000 * 100%);"@

In my case the bar meassures glory, and I know the max value. I didn't want to pick up a calculator each time I updated it. If you use it for XP, you just need to change the first to values. The first value us current "XP" and the second is "max".

Unknown

I don't think that would work accurately for XP past the first level without then having to modify it further. To get the appropriate percentage on XP after first level requires something like:

* The amount needed for next level - the amount needed to have made it to the current level = total amount needed to gain another level
* Current amount - amount needed for current level = current build to new level
* Current build to new level / total needed to gain another level * 100%

Otherwise the percentage of growth for the current level would be skewed by previous levels data. At least I think that is correct, math is actually not one of my strongest skills.

--
Alex
"Dragon Age: Requiem":https://dragon-age-requiem.obsidianportal.com/

Bortas

Awesome, I dig it! I'm thinking I'm going to adapt this for my front page.

-bort
"Morwindl":http://morwindl.obsidanportal.com

Unknown

Have at it, and adapt to your specific needs. Working on fleshing out an adaptation of a tooltip popup that I want to get in place on my page since it will be a bit more mobile friendly than the one I have in place currently. Just one last issue left with it that I am trying to hammer out and then I will probably kick that up here too.

--
Alex
"Dragon Age: Requiem":https://dragon-age-requiem.obsidianportal.com/

Bortas

I tossed it up on the front page as a group, and I used a modified version of the width calculator: I will update the equation once a level, and the total every session:

@style="width:calc((53500 - (9 * (9 + 1) * 500)) / (((10 * (10 + 1)) - (9 * (9 + 1))) * 500) * 100%)"@

or.....

@style="width:calc((CURRENT EXP - (X * (X + 1) * 500)) / (((Y * (Y + 1)) - (X * (X + 1))) * 500) * 100%)"@
X = previous level number
Y = current level number

(formula based on D&D 3.5 exp progression)

I'm sure I could probably simplify the formula, but feeling just too spent after replacing a roof today!

-bort
"Morwindl":http://morwindl.obsidianportal.com

Unknown

I like the adaptation - looks pretty good.

--
Alex
"Dragon Age: Requiem":https://dragon-age-requiem.obsidianportal.com/