不使用图像显示进度

Question

我想设计一个进度条,而不使用图像(例如GIF动画......).这可以用html css和jquery完成吗？试图在这里发挥创意:)

更新:无法确定进度百分比,因此必须是循环

Answer 1

自己动手做法:只需选择一个单行间距字体并编写一个函数来更新要显示的字符串.

例如.空白条形图

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

有一个存储偏移开始的var

在调用所述函数时,使用offset作为开始标记,用say,'>'chars替换位置,然后将偏移量增加1.(不要忘记以模数为模)

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

显示进度条时,在末尾添加管道......

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

使用CSS设置颜色输入一些标签,并使用ASCII格式的Vista格式滚动进度条

Answer 2

网上有很多关于如何使用CSS执行此操作的示例.这里还有一个jquery插件:http://docs.jquery.com/UI/Progressbar