Geek Answers Handbook

Show progress without using an image

I would like to create a progress bar without using an image (e.g. animated gif ...). Is it possible to do this only with html css and jquery? trying to be creative here :)

Update: the percentage of progress cannot be determined, so it must be a loop

+4
source share
6 answers

do-it method yourself: just select a font with a monolayer and write a function to update the line that will be displayed.

For instance. Empty column row

--------------------------------

Have a var that stores the start of the offset

After calling the specified function, using the offset as the starting marker, replace the position with the words ">", and then increase the offset by 1. (Do not forget the modulo)

 >>>>---->>>>---->>>>---->>>>---- ->>>>---->>>>---->>>>---->>>>--- -->>>>---->>>>---->>>>---->>>>-- --->>>>---->>>>---->>>>---->>>>- ---->>>>---->>>>---->>>>---->>>> >---->>>>---->>>>---->>>>---->>> >>---->>>>---->>>>---->>>>---->> >>>---->>>>---->>>>---->>>>---->

When the progress bar is displayed, add pipes to the ends ...

 |>>>>---->>>>---->>>>---->>>>----| |->>>>---->>>>---->>>>---->>>>---| |-->>>>---->>>>---->>>>---->>>>--| |--->>>>---->>>>---->>>>---->>>>-| |---->>>>---->>>>---->>>>---->>>>| |>---->>>>---->>>>---->>>>---->>>| |>>---->>>>---->>>>---->>>>---->>| |>>>---->>>>---->>>>---->>>>---->|

Throw away some tags with CSS customization colors, and you have Vista-esque scroll progress bar, in ASCII

+9
source

There are many examples on the Internet of how to do this using CSS. There is also a jquery plugin here: http://docs.jquery.com/UI/Progressbar

+7
source

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>
+2
source

You can use the div tag to expand using height.

For example, if you have a div tag with a width of: 0px and use jQuery to increase the size of the div tag in percent

If your progress is 50%, you can use jQuery to set the width: 50%;

 <div style='width:200px'> <div style='width:50%'></div> </div>

Sorry may not help you at the end of jQuery. I did something similar with PHP before

+1
source

What happened to the animated GIF? Since you cannot measure percent progress, it really doesn't make sense to use a progress bar. You could animate a little pig that would build a brick wall around itself, and then a little wolf would blow it and loop forever. This would have the added benefit of referring to the average person's opinion of how his or her work looks.

+1
source

You can only have a read-only text field that is gradually overwritten with more "l" characters using JavaScript, it can be ugly, but you can do it well.

0
source

More articles:


All Articles