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.
