Показать прогресс без использования изображения - PullRequest
Новая
       5

Показать прогресс без использования изображения

4 голосов
/ 10 августа 2009

Я хотел бы создать индикатор выполнения без использования изображения (например, анимированный GIF ...). Можно ли это сделать только с помощью HTML CSS и JQuery? пытаюсь быть креативным здесь:)

Обновление: процент прогресса не может быть определен, поэтому это должен быть цикл

Ответы [ 6 ]

9 голосов
/ 10 августа 2009

метод «сделай сам»: просто выберите моноширинный шрифт и напишите функцию для обновления отображаемой строки.

Например. Пустая строка бара 

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

Иметь переменную, которая хранит начало смещения

При вызове указанной функции, используя смещение в качестве начального маркера, замените позиции, скажем, символами '>', затем увеличьте смещение на 1. (Не забудьте по модулю) 

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

При отображении индикатора выполнения добавьте трубы в концы ... 

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

Добавьте некоторые теги с настройками цвета CSS, и вы получите полосу прогресса прокрутки в стиле Vista, в ASCII

7 голосов
/ 10 августа 2009

В Интернете есть много примеров того, как сделать это с помощью CSS. Здесь также есть плагин jquery: http://docs.jquery.com/UI/Progressbar

2 голосов
/ 10 августа 2009

Это то, что сказал Шамир, но со всем: 

<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>
1 голос
/ 10 августа 2009

Что не так с анимированным GIF? Поскольку вы не можете оценить процент прогресса, на самом деле не имеет смысла использовать индикатор выполнения. Вы могли бы оживить маленького поросенка, строящего вокруг себя кирпичную стену, а затем маленького волка, взорвавшего его, и закрутить его навсегда. Это имело бы дополнительное преимущество, заключающееся в обращении к чувству обычного человека о том, на что похожа его или ее работа.

1 голос
/ 10 августа 2009

Вы можете использовать тег Div для расширения с помощью высоты.

Например, если у вас есть тег div с шириной: 0 пикселей и вы используете jQuery, чтобы увеличить размер тега div в процентах

если ваш прогресс составляет 50%, вы можете использовать jQuery для установки ширины: 50%; 

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

Извините, я не могу помочь вам в конце jQuery. Я делал что-то похожее с PHP до

0 голосов
/ 10 августа 2009

Вы могли бы просто иметь текстовое поле только для чтения, которое постепенно переписывалось с большим количеством символов «l» в JavaScript, могло бы быть некрасивым, но вы могли бы заставить его выглядеть хорошо.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...