The Most Simple Progress Bar - HTML5 CSS3 JavaScript

The most simple yet sufficient little progress bar widget using HTML-CSS-JavaScript. It is a graphical control element to visualize the progression of the change of a JavaScript variable inside a range (usually 0-100). Use this to indicate download, file transfer, or installation progress. The graphic is accompanied by a textual representation of the progress in a percent format as well.

You can see the preview below how the responsive widget displays, but of course you can customise its view:

Download the .zip package which contains the .html, .css and .js files and they can be used out of the box or copy only the snippets you need.

What contains the progress bar script package

The script to draw the slider:

Call the drawszlider function when you want to refresh the slider. The first parameter is the full length of the bar (usually 100) and the second is the progress. The function calculates the percentage and refreshes the slider

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

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

<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 for a starting point:

#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 two 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+'%';
}

Download ZIP Package

These code snippets might contain some character encoding errors caused by the web browsers so I recommend to download the .zip package!

Have fun!