Click here to Skip to main content
13,054,329 members (129,621 online)
Click here to Skip to main content
Add your own
alternative version


25 bookmarked
Posted 11 Oct 2006

Percentage Bar

, 15 Feb 2012
Rate this:
Please Sign up or sign in to vote.
Display a simple percentage bar easily using Javascript and CSS

Sample Image - Percentage_Bar.jpg


In a recent project, a percentage bar was needed to show what percentage of the work had been completed. As a result, I came up with a simple way by using the <hr> and <span> HTML tags with simple CSS and Javascript to create the percentage bar.

The overall concept is easy: First use a <span> tag to wrap around the <hr>. Then, by setting the <span> tag border style, the border of the bar can be modified. Also, by changing the height of <hr>, the bar height can be adjusted.


Here is the code actually used in this project:

border-bottom: thin solid gray;
height: 15pt;
width: 100pt;
height: 10pt;
color: blue;
function change(x)

<span ><hr width=80%  id = "process" name = "process"  align=left></span>
<input name=input type=text />
<a onclick="change(document.all.input.value)">% SET</a>


If anyone knows a different way to do this, please contact me or leave a message here. Thank you all.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

China China
No Biography provided

You may also be interested in...

Comments and Discussions

GeneralDid well Pin
Vishram25-Oct-06 14:48
memberVishram25-Oct-06 14:48 
GeneralRe: Did well Pin
jebberwocky20-Nov-06 0:27
memberjebberwocky20-Nov-06 0:27 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170713.1 | Last Updated 15 Feb 2012
Article Copyright 2006 by jebberwocky
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid