Как можно было бы сделать индикатор выполнения в html/css/javascript. Я действительно не хочу использовать Flash. Что-то вроде того, что можно найти здесь: http://dustincurtis.com/about.html
Все, что я действительно хочу, это "индикатор выполнения", который меняет значения, которые я даю в PHP. Каким будет ваш процесс? Есть ли хорошие учебники по этому поводу?
Вы можете сделать это, управляя шириной 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, если вы этого пожелаете.
Если вы используете 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');
http://jqueryui.com/demos/progressbar/
Проверьте это, возможно, это то, что вам нужно.
Вы можете использовать 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);
}
В основном это: у вас есть три файла: ваш длинный PHP script, индикатор выполнения, управляемый Javascript (@SapphireSun дает возможность), и прогресс script. Жесткой частью является Progress Script; ваш длинный script должен иметь возможность сообщать о своем прогрессе без прямой связи с вашим прогрессом script. Это может быть в виде идентификатора сеанса, сопоставленного счетчикам прогресса, базе данных или проверке того, что не закончилось.
Процесс прост:
Я пробовал простой индикатор выполнения. Он не доступен для клика, просто отображает фактический процент. Здесь есть хорошая экспликация и код: http://ruwix.com/simple-javascript-html-css-slider-progress-bar/
Вот мой подход, я попытался сохранить его тонким:
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: здесь
Бесконечный индикатор выполнения с использованием чистого 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>
Я использовал этот индикатор выполнения. Для получения дополнительной информации об этом вы можете пройти через ссылку, например, настройку, кодирование и т.д.
<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>
Надеюсь, это может быть полезно для somoneone.
var myPer = 35;
$("#progressbar")
.progressbar({ value: myPer })
.children('.ui-progressbar-value')
.html(myPer.toPrecision(3) + '%')
.css("display", "block");
Я знаю, что следующий не работает в настоящее время, потому что браузеры еще не поддерживают его, но, возможно, когда-нибудь это поможет:
Во время этого сообщения 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, не следует слишком сильно ее расширять (но, конечно, я действительно не знаю, если честно). Второе: вышеприведенное является лишь одним хорошим примером, показывающим, насколько мощным может быть эта функциональность. Надеюсь, они начнут поддерживать его в ближайшее время, или он даже не будет частью окончательной спецификации.
Вы можете создать индикатор выполнения любого элемента html, для которого вы можете установить градиент. (Довольно круто!) В приведенном ниже примере фон элемента HTML обновляется линейным градиентом с помощью JavaScript:
myElement.style.background = "linear-gradient(to right, #57c2c1 " + percentage + "%, #4a4a52 " + percentage + "%)";
PS Я установил для обоих местоположений percentage то же самое, чтобы создать жесткую линию. Играйте с дизайном, вы можете даже добавить границу, чтобы получить классический вид выполнения:)
Вы можете воссоздать индикатор выполнения с помощью анимации CSS3, чтобы он выглядел лучше.
HTML
<div class="outer_div">
<div class="inner_div">
<div id="percent_count">
</div>
</div>
CSS/CSS3
.outer_div {
width: 250px;
height: 25px;
background-color: #CCC;
}
.inner_div {
width: 5px;
height: 21px;
position: relative; top: 2px; left: 5px;
background-color: #81DB92;
box-shadow: inset 0px 0px 20px #6CC47D;
-webkit-animation-name: progressBar;
-webkit-animation-duration: 3s;
-webkit-animation-fill-mode: forwards;
}
#percent_count {
font: normal 1em calibri;
position: relative;
left: 10px;
}
@-webkit-keyframes progressBar {
from {
width: 5px;
}
to {
width: 200px;
}
}
Вы можете использовать ProgressBar.js. Никаких зависимостей, простого API и не поддерживает основные браузеры.
var line = new ProgressBar.Line('#container');
line.animate(1);
Дополнительные примеры использования на демонстрационной странице.
Если вам нужно показать и скрыть индикатор выполнения внутри ваших php и java script, то выполните следующий шаг. Это полное решение, не нужно никакой библиотеки и т.д.
//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>
Ссылка на изображение: Загрузить изображение здесь
Хотя можно построить индикатор выполнения, используя setInterval и анимируя его ширину.
Для лучшей производительности при анимации индикатора выполнения необходимо учитывать только свойства композитора и управлять количеством слоев.
Вот пример:
function update(e){
var left = e.currentTarget.offsetLeft;
var width = e.currentTarget.offsetWidth
var position = Math.floor((e.pageX - left) / width * 100) + 1;
var bar = e.currentTarget.querySelector(".progress-bar__bar");
bar.style.transform = 'translateX(' + position + '%)';
}body {
padding: 2em;
}
.progress-bar {
cursor: pointer;
margin-bottom: 10px;
user-select: none;
}
.progress-bar {
background-color: #669900;
border-radius: 4px;
box-shadow: inset 0 0.5em 0.5em rgba(0, 0, 0, 0.05);
height: 20px;
margin: 10px;
overflow: hidden;
position: relative;
transform: translateZ(0);
width: 100%;
}
.progress-bar__bar {
background-color: #ececec;
box-shadow: inset 0 0.5em 0.5em rgba(0, 0, 0, 0.05);
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
transition: all 500ms ease-out;
}Click on progress bar to update value
<div class="progress-bar" onclick="update(event)">
<div class="progress-bar__bar"></div>
</div>Вы можете использовать setInterval для создания индикатора выполнения.
function animate() {
var elem = document.getElementById("bar");
var width = 1;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}#progress-bar-wrapper {
width: 100%;
background-color: #ddd;
}
#bar {
width: 1%;
height: 30px;
background-color: orange;
}<div id="progress-bar-wrapper">
<div id="bar"></div>
</div>
<br>
<button onclick="animate()">Click Me</button>Я писал ответ на аналогичный вопрос, который был удален, поэтому я публикую его здесь на случай, если он кому-нибудь пригодится.
Разметка может быть размещена в любом месте и занимает 50% вертикальной площади, даже если она скрыта. (Чтобы он не занимал вертикальное пространство и вместо этого перекрывал верхние 50 пикселей, мы можем просто дать progressContainerDiv абсолютное позиционирование (внутри любого позиционируемого элемента) и присвоить стилю свойство display вместо свойства visible.)
Общая структура основана на коде, представленном в этой статье Geeks for Geeks.
const
progressContainerDiv = document.getElementById("progressContainerDiv");
progressShownDiv = document.getElementById("progressShownDiv");
let
progress = 0,
percentageIncrease = 10;
function animateProgress(){
progressContainerDiv.style.visibility = "visible";
const repeater = setInterval(increaseRepeatedly, 100);
function increaseRepeatedly(){
if(progress >= 100){
clearInterval(repeater);
progressContainerDiv.style.visibility = "hidden";
progressNumberSpan.innerHTML = "";
progress = 1;
}
else{
progress = Math.min(100, progress + percentageIncrease);
progressShownDiv.style.width = progress + "%";
progressNumberSpan.innerHTML = progress + "%";
}
}
}#progressContainerDiv{
visibility: hidden;
height: 40px;
margin: 5px;
}
#progressBackgroundDiv {
width: 50%;
margin-left: 24%;
background-color: #ddd;
}
#progressShownDiv {
width: 1%;
height: 20px;
background-color: #4CAF50;
}
#progressNumberSpan{
margin: 0 auto;
}<div id="progressContainerDiv">
<div id="progressBackgroundDiv">
<div id="progressShownDiv"></div>
</div>
<div id="progressNumberContainerDiv">
<span id="progressNumberSpan"></span>
</div>
</div>
<button type="button" onclick="animateProgress()">Go</button>
<div id="display"></div>