Hi i've done a progress bar in javascript. but i dont know how to do the mapping.that is map it to a percentage. the lenght of my progress bar is 260. Can someone help?

4 Years
Discussion Span
Last Post by Biiim

what do you mean by mapping? You mean you have like 100% of something but scale is 260 so you want to find how much 1% means on scale?

100% - 260
1 % - x

1*260/100 = 2.6

if its that what you want :)


Use <div id=...>My progress bar</div>
And change the contents (innerHTML property) with your progress bar !
I did it in my programs and it works fine !


Maybe OTT but it was fun. heres an example of progress bar in JS

<script type='text/javascript'>
var barLength = 260;
var progress = 0;
var progressEnd = 200;
var progressBarCurrent = 0;
var tickSpeed = 300;

function setProgressBar(obj,barLength,progress,progressEnd){
    if(progress < 0){
        obj.style.width = '0px';
        var percentage = progress/progressEnd;
        var barlen = barLength*percentage;
        obj.style.width = barlen+'px';
function tester(obj){
    progress = progress + 1;
    setTimeout(function() { tester(obj); },tickSpeed);
function resetBar(){
    progress = 0;
function updateBarLen(obj){
    barLength = parseInt(obj.value);
function updateTickSpeed(obj){
    tickSpeed = parseInt(obj.value);
<div id='progressLoadBar' style='height:30px;background-color:#cc2222;border-radius:5px;box-shadow: 3px 3px 15px #dddddd;'></div>
<a href='javascript:' onclick='resetBar();'>Reset Progress</a><br/>
Change bar width:<input onchange='updateBarLen(this);' value='260'/><br/>
Change tick speed(ms):<input onchange='updateTickSpeed(this);' value='300'/>
<script type='text/javascript'>
var theProgressBar = document.getElementById('progressLoadBar');

Edited by Biiim: typo

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.