0

I am a newbie in Javascript. I have created a 'donation progress bar' with intervals. The bar is activated by a button and it stops at the end of it; But I would like that, once activated, the bar stops to a specific amount which I set (for example 20.000$), and at that point shows this amount in the middle of the bar itself. I have seen one of this kind in wikipedia. Which is the function I must use to do this? I can not find.. Thanks in advance!

function move() { let elem = document.getElementById("progress-bar"); let stepValue = 0; let id = setInterval(frame, 50); function frame() { if (stepValue >= 100) { clearInterval(id); } else { elem.style.width = stepValue + 1 + "%"; elem.innerHTML = stepValue + 1 + "%"; stepValue = stepValue + 1; } } }
body { max-width: 75%; margin: auto; } .progress-goals { margin: 20px auto 0; display: flex; justify-content: space-between; } .progress-goals h3 { display: inline-block; } .progress-goals:last-child { flex: 1; } .progress-bg { position: relative; display: flex; flex-direction: row; justify-content: space-between; margin: 0px auto 0px; height: 78px; border-radius: 5px; -moz-box-shadow: inset 0 0 10px #ccc; -webkit-box-shadow: inset 0 0 10px #ccc; box-shadow: inset 0 0 10px #ccc; } .goal-bar { background-color: rgb(58, 58, 58); width: 5px; height: 78px; border-radius: 15px; } .progress-bar { display: block; height: 100%; width: 0px; background: linear-gradient( to bottom, rgba(255, 255, 255, 0.8) 18%, rgba(28, 53, 120, 0.8), rgba(220, 24, 27, 0.8)); position: absolute; overflow: hidden; font-size: 15px; text-align: center; color: white; transition: all 700ms ease; } .progress-btn-container { display: grid; place-items: center; height: 50px; } .progress-btn { /* display: block; */ cursor: pointer; margin: auto; display: inline-block; color: #444; background-color: #fff; padding: 10px; border: 1px solid #444; border-radius: 5px; text-transform: uppercase; font-family: inherit; font-weight: 600; } .progress-btn:hover { color: #555; background-color: #f1f1f1; padding: 9px; border: 1px solid #555; }
<div class="progress-goals"> <h3 class="no-goal">$0</h3> <h3 class="first-goal">$1,000</h3> <h3 class="second-goal">$10,000</h3> <h3 class="last-goal">$100,000</h3> </div> <div class="progress-bg" id="progress-bg"> <div class="goal-bar"></div> <div class="goal-bar"></div> <div class="goal-bar"></div> <div class="goal-bar"></div> <div class="progress-bar" id="progress-bar"> </div> </div> <div class="progress-btn-container"> <button class="progress-btn" onclick="move()">total donated</button> </div>

Improve this question

1 Answer 1

Reset to default
1

A simple way to do this would be specifying an attribute on the progress bar itself. You could do something like <div class="progress-bar" id="progress-bar" goal="20">, where you add the attribute "goal" directly into the HTML.

Then, you can use the getAttribute() function to retrieve the value of it in your if statement, like if (stepValue >= parseInt(elem.getAttribute("goal")) {..., where you retrieve the attribute value, and parse it (which is a string value) into an integer for it to be properly compared with the stepValue.

Code:

function move() { let elem = document.getElementById("progress-bar"); let stepValue = 0; let id = setInterval(frame, 50); function frame() { if (stepValue >= elem.getAttribute("goal")) { clearInterval(id); } else { elem.style.width = stepValue + 1 + "%"; elem.innerHTML = stepValue + 1 + "%"; stepValue = stepValue + 1; } } } 
body { max-width: 75%; margin: auto; } .progress-goals { margin: 20px auto 0; display: flex; justify-content: space-between; } .progress-goals h3 { display: inline-block; } .progress-goals:last-child { flex: 1; } .progress-bg { position: relative; display: flex; flex-direction: row; justify-content: space-between; margin: 0px auto 0px; height: 78px; border-radius: 5px; -moz-box-shadow: inset 0 0 10px #ccc; -webkit-box-shadow: inset 0 0 10px #ccc; box-shadow: inset 0 0 10px #ccc; } .goal-bar { background-color: rgb(58, 58, 58); width: 5px; height: 78px; border-radius: 15px; } .progress-bar { display: block; height: 100%; width: 0px; background: linear-gradient( to bottom, rgba(255, 255, 255, 0.8) 18%, rgba(28, 53, 120, 0.8), rgba(220, 24, 27, 0.8)); position: absolute; overflow: hidden; font-size: 15px; text-align: center; color: white; transition: all 700ms ease; } .progress-btn-container { display: grid; place-items: center; height: 50px; } .progress-btn { /* display: block; */ cursor: pointer; margin: auto; display: inline-block; color: #444; background-color: #fff; padding: 10px; border: 1px solid #444; border-radius: 5px; text-transform: uppercase; font-family: inherit; font-weight: 600; } .progress-btn:hover { color: #555; background-color: #f1f1f1; padding: 9px; border: 1px solid #555; } 
<div class="progress-goals"> <h3 class="no-goal">$0</h3> <h3 class="first-goal">$1,000</h3> <h3 class="second-goal">$10,000</h3> <h3 class="last-goal">$100,000</h3> </div> <div class="progress-bg" id="progress-bg"> <div class="goal-bar"></div> <div class="goal-bar"></div> <div class="goal-bar"></div> <div class="goal-bar"></div> <div class="progress-bar" id="progress-bar" goal="20"> </div> </div> <div class="progress-btn-container"> <button class="progress-btn" onclick="move()">total donated</button> </div>

Note that you'd have to figure out the percentage you want. $20,000 would probably be around 80%, so you'd put 80 in the goal attribute.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

I have tried but seems doesn't work, can you make this example using code snippet? thank you
Now the bar is working, thanks. But what if I want, as I stated in the title of the post, the bar to show the amount (for example if I set '80' to the goal attribute to let bar arrive at its 80%, how can I let the bar shows on it "$20,000"?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.