I would like to design a progress bar, without using an image (eg animated gif...). Can this be done with just html css and jquery? trying to be creative here :)
Update: the progress percentage cannot be determined, so it has to be a loop
+7
A:
There are many examples on the web of how to do this with CSS. There is also a jquery plugin here: http://docs.jquery.com/UI/Progressbar
smercer
2009-08-10 00:13:36
+1 for a sensible solution.
karim79
2009-08-10 00:27:21
+1
A:
You could use a Div tag to expand using height.
For example if you had a div tag with width:0px and used jQuery to expand the size of the div tag as the percentage came
if your progress is at 50% you can use the jQuery to set the width:50%;
<div style='width:200px'>
<div style='width:50%'></div>
</div>
Sorry cant help you on the jQuery end.. i did something similar with PHP before
Shahmir Javaid
2009-08-10 00:15:09
+9
A:
a do-it yourself method: Just pick a mono-spaced font and write a function to update a string to be displayed.
For example. Blank bar string
--------------------------------
Have a var which stores offset start
Upon call to said function, using offset as a start marker, replace positions with say, '>' chars, then increase offset by 1. (Don't forget to modulo it)
>>>>---->>>>---->>>>---->>>>----
->>>>---->>>>---->>>>---->>>>---
-->>>>---->>>>---->>>>---->>>>--
--->>>>---->>>>---->>>>---->>>>-
---->>>>---->>>>---->>>>---->>>>
>---->>>>---->>>>---->>>>---->>>
>>---->>>>---->>>>---->>>>---->>
>>>---->>>>---->>>>---->>>>---->
When displaying the progress bar, add pipes to the ends...
|>>>>---->>>>---->>>>---->>>>----|
|->>>>---->>>>---->>>>---->>>>---|
|-->>>>---->>>>---->>>>---->>>>--|
|--->>>>---->>>>---->>>>---->>>>-|
|---->>>>---->>>>---->>>>---->>>>|
|>---->>>>---->>>>---->>>>---->>>|
|>>---->>>>---->>>>---->>>>---->>|
|>>>---->>>>---->>>>---->>>>---->|
Throw in some tags with CSS setting colours and you have a Vista-esque scrolling progress bar, in ASCII
Dan McGrath
2009-08-10 00:21:36
A:
You could just have a read only text box that get's progressively rewritten with more "l" characters by JavaScript, could be ugly, but you might be able to make it look good.
Shraptnel
2009-08-10 00:23:11
+1
A:
What's wrong with an animated GIF? Since you can't estimate the percent progress, it doesn't really make sense to use a progress bar. You could animate a small pig building a brick wall around himself, and then a little wolf blowing it down, and loop it forever. This would have the added advantage of appealing to the average person's sense of what his or her job is like.
MusiGenesis
2009-08-10 01:11:35
+2
A:
This is what Shamir said, but with everything:
<html>
<head>
<style type="text/css">
#progress-bar-wrapper
{
border: 1px solid #000;
width: 500px;
height: 30px;
}
#progress-bar
{
background-color: #F00;
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function() { animateProgressBar() });
function animateProgressBar()
{
$("#progress-bar")
.css("width", "0%")
.animate(
{
width: "100%"
},
1500, //Speed of loading bar
animateProgressBar);
}
</script>
</head>
<body>
<div id="progress-bar-wrapper">
<div id="progress-bar"></div>
</div>
</body>
</html>
attack
2009-08-10 03:56:33