php прогресс при запуске оболочки Linux удаленно (ssh) [дубликат]

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

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

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

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

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

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

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

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

Демо и загрузить link

[/g1]

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

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

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

var progressBar;

window.onload = function(){

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

}

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

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

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

Fiddle: здесь

[/g1]

Вы можете использовать ProgressBar.js . Никаких зависимостей, простого API и не поддерживает основные браузеры.

var line = new ProgressBar.Line('#container');
line.animate(1);

Дополнительные примеры использования на демонстрационной странице.

Я знаю, что следующее не работает в настоящее время, поскольку браузеры еще не поддерживают его, но, возможно, когда-нибудь это поможет:

Во время этого сообщения attr() по другим свойствам, чем content является только Рекомендацией кандидата 1. Как только он будет реализован, можно создать индикатор выполнения только с одним элементом (например, с HTML 5 <progress/>, но с лучшими параметрами стиля и текстом внутри)

<div class="bar" data-value="60"></div>

и чистым CSS

.bar {
    position: relative;
    width: 250px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    background: #003458;
    color: white;
}

.bar:before {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    bottom: 0;
    width: attr(data-value %, 0); /* currently not supported */
    content: '';
    background: rgba(255, 255, 255, 0.3);
}

.bar:after {
    content: attr(data-value) "%";
}

Ниже приведена не работающая демонстрация .

1 Не могу представить, почему это не реализовано ни в одном браузере. Во-первых, я думаю, что если у вас уже есть функциональность для content, не слишком сложно это продлить (но, конечно, я действительно не знаю, если честно). Второе: вышеприведенное является лишь одним хорошим примером, показывающим, насколько мощным может быть эта функциональность. Надеюсь, они начнут поддерживать его в ближайшее время, или он даже не будет частью окончательной спецификации.

Если вам нужно показать и скрыть индикатор выполнения внутри вашего php и java-скрипта, выполните следующий шаг. Это полное решение, не требуется никакой библиотеки и т. д.

           //Design Progress Bar

  <style>
#spinner
{     
position: absolute;
left: 50%;
top: 50%;
background-color: white;
z-index: 100;

height: 200px;


width: 300px;
margin-left: -300px;

    /*Change your loading image here*/
   background: url(images/loading12.gif) 50% 50% no-repeat ;

}
  </style>

               //Progress Bar inside your Page

<div id="spinner" style=" display:none; ">
</div>                                

    // Button to show and Hide Progress Bar
<input class="submit" onClick="Show()" type="button" value="Show" /> 
<input class="submit" onClick="Hide()" type="button" value="Hide" /> 

            //Java Script Function to Handle Button Event     
<script language="javascript" type="text/javascript">
 function Show()
 {       
  document.getElementById("spinner").style.display = 'inline';
 }
function Hide()
 {       
  document.getElementById("spinner").style.display = 'none';
 }

</script>

Ссылка на изображение: Загрузить изображение отсюда

Инфинитивный индикатор выполнения с использованием чистого 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/

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

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

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

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

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

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

Или создать собственную панель выполнения.

Пример написанное в сенча

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');