Как сделать индикатор

Question

Как можно было бы сделать индикатор выполнения в html / css / javascript. Я действительно не хочу использовать Flash. Нечто похожее на то, что можно найти здесь: http://dustincurtis.com/about.html

Все, что мне действительно нужно, - это индикатор выполнения, который меняет значения, которые я даю в PHP Каков будет ваш процесс? Есть ли хорошие уроки по этому вопросу?

Answer 1

Вы можете сделать это, управляя шириной div через css.Примерно так:

<div id="container" style="width:100%; height:50px; border:1px solid black;">
  <div id="progress-bar" style="width:50%;/*change this width */
       background-image:url(someImage.png);
       height:45px;">
  </div>
</div>

Это значение ширины может быть отправлено с php, если вы того пожелаете.

Answer 2

Если вы используете HTML5, лучше использовать тег <progress>, который был недавно представлен.

<progress value="22" max="100"></progress>

Или создайте собственный индикатор выполнения.

Пример написан на sencha

if (!this.popup) {
            this.popup = new Ext.Panel({
            floating: true,
            modal: false,
            // centered:true,
            style:'background:black;opacity:0.6;margin-top:330px;',
            width: '100%',
            height: '20%',
            styleHtmlContent: true,
            html: '<p align="center" style="color:#FFFFFF;font-size:12px">Downloading Data<hr noshade="noshade"size="7" style="color:#FFFFFF"></p>',

            });
}
this.popup.show('pop');

Answer 3

http://jqueryui.com/demos/progressbar/

Проверьте, это может быть то, что вам нужно.

Answer 4

Вы можете использовать progressbar.js; Анимированный индикатор выполнения и маленький график (спарклайн)

Демонстрация и загрузка ссылка

Использование HTML;

<div id="my-progressbar"></div>

Использование Javascript;

var progressBar;

window.onload = function(){

    progressBar = new ProgressBar("my-progressbar", {'width':'100%', 'height':'3px'});
    progressBar.setPercent(60);

}

Answer 5

В основном это так: у вас есть три файла: ваш долго работающий PHP-скрипт, индикатор выполнения, управляемый Javascript ( @ SapphireSun предоставляет опцию ), и сценарий выполнения. Сложная часть - это сценарий прогресса; ваш длинный сценарий должен иметь возможность сообщать о своем прогрессе без непосредственного сообщения вашему сценарию выполнения. Это может быть в форме идентификатора сеанса, сопоставленного с индикаторами выполнения, базой данных или проверкой того, что еще не завершено.

Процесс прост:

1. Выполните ваш скрипт и обнулите индикатор выполнения
2. Используя AJAX, запросите ваш скрипт прогресса
3. Скрипт прогресса должен как-то проверять прогресс
4. Измените индикатор выполнения, чтобы отразить значение
5. Очистить по окончании

Answer 6

Я попробовал простой индикатор выполнения.Он не кликабелен, просто отображает фактический процент.Здесь хорошее объяснение и код: http://ruwix.com/simple-javascript-html-css-slider-progress-bar/

Answer 7

Вот мой подход, я пытался сохранить его стройным:

HTML:

<div class="noload">
    <span class="loadtext" id="loadspan">50%</span>
    <div class="load" id="loaddiv">
    </div>
</div>

CSS:

.load{    
    width: 50%;
    height: 12px;
    background: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAALCAYAAAC+jufvAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwAAADsABataJCQAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAAAPklEQVQYV2M48Gvvf4ZDv/b9Z9j7Fcha827Df4alr1b9Z1j4YsV/BuML3v8ZTC/7/GcwuwokrG4DCceH/v8Bs2Ef1StO/o0AAAAASUVORK5CYII=);  
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.noload{
    width: 100px;    
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAALCAYAAAC+jufvAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwAAADsABataJCQAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAAANUlEQVQYVy3EIQ4AQQgEwfn/zwghCMwGh8Tj+8yVKN0d2l00M6i70XsPmdmfu6OIQJmJqooPOu8mqi//WKcAAAAASUVORK5CYII=);     
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #999999;    
    position: relative;
}

.loadtext {
    font-family: Consolas;    
    font-size: 11px;
    color: #000000;
    position: absolute;
    bottom: -1px;
}

Скрипка: здесь

Answer 8

Инфинитив индикатор выполнения с использованием чистого Javascript

<div id="container" style="width:100%; height:5px; border:1px solid black;">
  <div id="progress-bar" style="width:10%;background-color: green; height:5px;"></div>
</div>

<script>
  var width = 0;
  window.onload = function(e){ 
    setInterval(function () {
        width = width >= 100 ? 0 : width+5;  
        document.getElementById('progress-bar').style.width = width + '%'; }, 200);            
  }
</script>

Пример http://fiddle.jshell.net/1kmum4du/

Answer 9

Я использовал этот индикатор выполнения .Для получения дополнительной информации об этом вы можете перейти по этой ссылке , т. Е. Настройке, кодированию и т. Д.

<script type="text/javascript">

var myProgressBar = null
var timerId = null

function loadProgressBar(){
myProgressBar = new ProgressBar("my_progress_bar_1",{
    borderRadius: 10,
    width: 300,
    height: 20,
    maxValue: 100,
    labelText: "Loaded in {value,0} %",
    orientation: ProgressBar.Orientation.Horizontal,
    direction: ProgressBar.Direction.LeftToRight,
    animationStyle: ProgressBar.AnimationStyle.LeftToRight1,
    animationSpeed: 1.5,
    imageUrl: 'images/v_fg12.png',
    backgroundUrl: 'images/h_bg2.png',
    markerUrl: 'images/marker2.png'
});

timerId = window.setInterval(function() {
    if (myProgressBar.value >= myProgressBar.maxValue)
        myProgressBar.setValue(0);
    else
        myProgressBar.setValue(myProgressBar.value+1);

},
100);
}

loadProgressBar();
</script>

Надеюсь, что это может быть полезно для somenone.

Answer 10

Вы можете создать индикатор выполнения любого HTML-элемента, для которого вы можете установить градиент. (Довольно круто!) В приведенном ниже примере фон HTML-элемента обновляется линейным градиентом с помощью JavaScript:

myElement.style.background = "linear-gradient(to right, #57c2c1 " + percentage + "%, #4a4a52 " + percentage + "%)";

PS Я установил оба местоположения percentage одинаково, чтобы создать жесткую линию. Поиграйте с дизайном, вы даже можете добавить рамку, чтобы получить классический вид индикатора прогресса:)

https://jsfiddle.net/uoL8j147/1/