Creating experience level bar with images

Question

1.00/5 (1 vote)

See more:

I'm trying to create an incremental XP Bar that highlights a percentage of the Orange bar based on how much experience the user has. Once the orange bar fills, it resets and one blue bubble will be filled.

1 bubble = 1 orange bar = 10% of a Level

http://www.imgim.com/sample_solution2b-01.jpg[^]

Any suggestions?

What I have tried:

I have tried working with this code, but I'm not sure it's going to work for what I need:

HTML

<html>
<head>
<style>

/* CSS ONLY XP BAR */
.graph { width: 300px; 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 */

</style>
</head>
<body>

<div class="graph round"><div class="bar round" style="width:34%"><span class="xpValue">Current XP / Level XP</span></div></div>


</body>
</html>

Posted 14-Feb-16 10:14am

Member 12326801

Updated 14-Feb-16 11:08am

Patrice T

v2

Add a Solution

Comments

ZurdoDev 14-Feb-16 20:47pm

Where are you stuck?

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Answer 1 · 2016-02-14T14:52:00

Have two images of round marks on top, gray and colored. Have the lime if img elements and change the src attribute with JavaScript: Element.setAttribute() — Web APIs | MDN[^].

For color bar inside a horizontal frame, you can use just а div with the style property width set by JavaScript:

JavaScript

myTrackbar.style.width = value;

Some of your elements overlap others; this is achieve by combining the CSS property position: relative and position: absolute, relative underneath, absolute on top: position — CSS | MDN[^].

It's a bit counter-intuitive: absolute is used for overlapping and is actually relative to the parent element, if it is styled as relative; this relative position and size is controlled by combination of style value left, top, right or bottom. It's easier to try and observer, than to explain.

Basically, that's all you need. Please try and ask some follow-up question is something doesn't work.

—SA