Simple JavaScript HTML CSS progress bar

37%

Run Demo

This is a very simple progress bar using HTML, CSS and JavaScript. It runs well on every major browser if JavaScript is not disabled.

To see how it works click on the Demo button or see it in action on the online Rubik’s Cube solver program page.

All the sliders I could find out there are using flash or images and they have unnecesary functions. The progress bar you can find here doesn’t load any images just some CSS code to style the bars. All you have to use is a JavaScript function, some styling for the progressbar and to place the HTML code where you want the slider to appear. Of course you have to call the function whenewer you want to refresh the percentage.

You can download the .zip package which contains the .html, .css and .js files and they can be used out of the box.

Here’s what you get with the progress bar script package

Copy in your HTML code the following code snippet where you want the slider to appear. By default it will take up the whole width of its container but you can change this in the CSS.

The script to draw the slider:

<body onload="drawszlider(121, 56);">

Place this code where you want your slider to appear:

<div id="szlider">
    <div id="szliderbar">
    </div>
    <div id="szazalek">
    </div>
</div>

You have to style the progress bar and the text indicating the actual percentage. The default CSS file fooks something like this:

#szlider{
    width:100%;
    height:15px;
    border:1px solid #000;
    overflow:hidden; }
#szliderbar{
    width:37%;
    height:15px;
    border-right: 1px solid #000000;
    background: #d65946; }
#szazalek {
    color: #000000;
    font-size: 15px;
    font-style: italic;
    font-weight: bold;
    left: 25px;
    position: relative;
    top: -16px; }

Finally a very short and simple JavaScript code. You will have to call this function to draw the slider. It has twho attributes, the first is the full width and the second is the actual state. For example if you want to display 50 percent call the function drawszlider(100,50) but you get the same result for drawszlider(30,15).

function drawszlider(ossz, meik){
    var szazalek=Math.round((meik*100)/ossz);
    document.getElementById("szliderbar").style.width=szazalek+'%';
    document.getElementById("szazalek").innerHTML=szazalek+'%';
}

zipped file Simple JavaScript HTML CSS progress bar

These code snippets might contain some errors due to character encoding so I recommend to download the .zip package!

Have fun!

Comments

Source of this document: WWW.RUWIX.COM
© 2013 Ruwix