HTML Progress Bar Percent

Posted on 2009-04-20
Last Modified: 2012-05-06
I want to do a progress bar using HTML. I have two images, like an old thermometer--one empty and one full. These are overlapped, and the full one grows from 0 to 100% as the procedure advances, filling up the tube. They are oriented horizontally. The hard part: I also want to show the percent complete in the center, on top of the images.
Question by:DanOBrien57
    LVL 6

    Expert Comment

    What do you have so far? What are you measuring?

    Author Comment

    I have the two images. I'm measuring the duration of a server process that periodically updates the client. I use AJAX to provide real-time updates. That part works. I just need an HTML solution for animating the two images and showing the percent complete text layered above the images.
    LVL 6

    Accepted Solution

    It took a little time to throw this together. It's pretty simple and should be self explanatory. If you have any questions let me know.
    <script language="javascript" type="text/javascript">
    function progress(obj)
    	var image = document.getElementById('image');
    	var percent = document.getElementById('percent');
    	percent.innerHTML = obj + '%';
    	inc = obj - 100;
 = inc;
    	if(obj == 100)
    function process()
    	//Do Something
    	//set progress
    	//Do Something else
    	//set the progress to something else
    	//Again do something else and set the progress
    	//you get the idea
    function reset()
    	var image = document.getElementById('image');
    	var percent = document.getElementById('percent');
    	percent.innerHTML = '';
 = -100;
    <style type="text/css">
    .div {
    	width : 102px;
    	height : 18px;
    	overflow : hidden;
    	border : 1px solid;
    .img {
    	position : relative;
    	left : -100px;
    .perc {
    	color : #CCC000;
    	width : 100px;
    	height : 18px;
    	position : relative;
    	top : -21px;
    	font-weight : bold;
    <div class="div">
    <img class="img" src="Pictures/prog.bmp" id="image">
    <div class="perc" id="percent"></div>
    <input type="button" value="Click Me" onclick="process();">

    Open in new window


    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Join & Write a Comment

    Do you want to insert HTML5 video into your site? This is the tutorial how to do so. What are the main advantages of HTML5 video? 1) Have good compression, good image quality, and low decode processor use. 2) It is royalty-free 3) It is easi…
    Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
    The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    733 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    26 Experts available now in Live!

    Get 1:1 Help Now