|
NEW SUPPORT LINE (South Africa only): SMS your support request (FIRST WORD MUST BE SUPPORT) to 072 532 1530
Simple CSS progress bar
Simple CSS Progress Bar
|
29%
|
In this CSS tutorial, we're going to look at a very simple implementation of a CSS progress bar. This could be used for any purpose in your website. To paraphrase Wayne (from Wayne's World II), "if you make it, they will use it...." |
The reason I am using this progress bar, is to create a sort of work in progress bar for myself. As it often happens, I'll be busy developing some new cool application (I develop in C, C++, C#, VB, PHP, ASP on platforms from web to PC to embedded microcontrollers!). Anyway, so I'll have a few things I'm working on, but someone always thinks their project is the ultimate priority and they just don't understand that I get busy too (ok, I know I work in a little back room and that I usually still have my pajamas and slippers on until, well, lets face it, until I go back to bed, but seriously, I really do get busy.... REALLY).
So, what I want to do is put up a very light weight version of a project management page on my company intranet. This won't be really sophisticated, in that it won't have dependencies and multiple levels, etc. All it will have is just bars. One for each job I'm busy with. And these bars will display the percentage I'm done with each job / project.
So, onto the CSS. To do a progress bar, all you need is a handful off CSS styles, and a small amount of javascript. Take a look at the CSS progress bar by clicking on this link. This is just a simple implementation of a CSS progress bar. What this particular one does is it loads up on the documents load event. It then populates the bar with 0% as text, as well as setting the bar to a 0% wide bar.
Two Divs
In this example, we use two divs, one inside the other. The first, outer div gives us the total size of the progress bar when viewed in the browser. I've simply set it to 100%. The next div, gives us our percentage complete by setting the visible portion's width to a percentage of the outer div. So, if we wanted to make the progress bar fit over only half of the screen, rather than over the full screen, set the outer div to 50% width. Because the inner div displays its width as a percentage of the outer div's width, you don't need to change its code at all.
We have a javascript function called DoCounter();. DoCounter increments a counter (which starts off as being 0). This incremented counter values is then written into the inner div's width property as a percentage. We also use the innerHTML property of the inner div to display the percentage as text.
We check to see what percentage the counter is on. From 0% to 25% we display the bar as green. From 25% to 50% we display the bar as blue. 50% to 75% its green and 75% upward its red. This would indicate at a glance what level of urgency the work has reached (and as we all know, red is BAD, we're running out of time).
Lastly, we check if we are still under 100%. If we are, we use javascripts setTimeout function. This function calls the function we specify after the time we specify. So, here the functions is called again, after 250 milliseconds. Each time its called, counter is incremented and our progress bar..., well, it progresses!
Code
So, here is the code:
<html>
<head>
<script language="javascript">
Counter = 0;
function DoCounter()
{
SlideParent = document.getElementById("SliderParent");
Slide = document.getElementById("Slider");
Slide.style.width = Counter + "%";
Slide.innerHTML = Counter + "%";
if(Counter <25)
{
SlideParent.style.borderColor = "green";
Slide.style.backgroundColor = "green";
}
else if(Counter >= 25 && Counter < 50)
{
SlideParent.style.borderColor = "blue";
Slide.style.backgroundColor = "blue";
}
else if(Counter >= 50 && Counter < 75)
{
SlideParent.style.borderColor = "orange";
Slide.style.backgroundColor = "orange";
}
else
{
SlideParent.style.borderColor = "red";
Slide.style.backgroundColor = "red";
}
if(Counter++ < 100)
{
setTimeout("DoCounter()",250);
}
}
</script>
</head>
<body onload="DoCounter();">
<div id="SliderParent" style="width:100%; border-style: solid; border-color:red; border-width:1px;">
<div id="Slider" style="width:0%; border-width:0px; background-color:red; color:white">
0%
</div>
</div>
</body>
</html>
Comments
I would love to hear from you. Please fill in a comment below to let me know if this helped at all, or how you've used this in your own projects, as well as any questions or comments.....
Comments
|
|
|
|
Add your comment