Question

我想设计一个进度条，而不使用图像（例如动画gif ......）。这可以用html css和jquery完成吗？试图在这里发挥创意：）

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

Answer 1

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

例如。空白条形码

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

有一个存储偏移开始的var

在调用所述函数时，使用offset作为开始标记，用say，'＆gt;'替换位置chars，然后将偏移量增加1.（不要忘记以模数为模）

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

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

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

使用CSS设置颜色扔一些标签，你有一个Vista格式的滚动进度条，用ASCII

Answer 2

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

Answer 3

这就是沙米尔所说的，但随着一切：

<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>

Answer 4

您可以使用Div标签来扩展使用高度。

例如，如果你有一个宽度为0px的div标签，并使用jQuery扩展div标签的大小，就像百分比一样

如果您的进度为50％，则可以使用jQuery设置宽度：50％;

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

抱歉，无法帮助你完成jQuery结束..我之前用PHP做了类似的事情

Answer 5

动画GIF出了什么问题？由于您无法估计进度百分比，因此使用进度条并没有多大意义。你可以为一只小猪建立一个围绕自己的砖墙的动画，然后一只小狼将它吹倒，然后将它永久地环绕。这样做的另一个好处就是能够吸引普通人对自己工作的看法。

Answer 6

你可能只有一个只读文本框，可以通过JavaScript逐步重写更多的“l”字符，可能很难看，但你可能会让它看起来很好。

不使用图像显示进度

6 个答案: