Click here to Skip to main content
15,867,834 members
Articles / Web Development / HTML

Percentage Bar

Rate me:
Please Sign up or sign in to vote.
1.88/5 (5 votes)
15 Feb 2012CPOL 39.2K   25   2
Display a simple percentage bar easily using Javascript and CSS

Sample Image - Percentage_Bar.jpg

Introduction

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.

Code

Here is the code actually used in this project:

HTML
<html>
<head>
<style>
span
{
border-bottom: thin solid gray;
height: 15pt;
width: 100pt;
}
hr
{
height: 10pt;
color: blue;
}
</style>
<script>
function change(x)
{
  document.all.process.width=x+'%';
}
</script>
</head>

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

</html>

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

License

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


Written By
China China
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralDid well Pin
Vishram25-Oct-06 14:48
Vishram25-Oct-06 14:48 
You did what exactly I did in one of my project, but instead of using hr I use div tag, so I can move and have more options to customize it.

use instead of hr & span tag ->

<div id="process" name="process" style="position:absolute; left:154px; top:114px; height:5px; z-index:1;Background-Color:red;overflow:hidden"></div>

You can also add MS filter Style->

<div id="process" name="process" style="position:absolute; left:154px; top:114px; height:10px; z-index:1;Background-Color:red;overflow:hidden;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr=Snow, EndColorStr=red)"></div>

Happy Coding...Big Grin | :-D

- Vishram
GeneralRe: Did well Pin
jebberwocky20-Nov-06 0:27
jebberwocky20-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.