Click here to Skip to main content
Click here to Skip to main content

Percentage Bar

, 15 Feb 2012 CPOL
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

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>
<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)

Share

About the Author

jebberwocky

China China
No Biography provided

Comments and Discussions

 
GeneralDid well PinmemberVishram25-Oct-06 14:48 
GeneralRe: Did well Pinmemberjebberwocky20-Nov-06 0:27 

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

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

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