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

Question

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

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

Answer 1

var myPer = 35;
$("#progressbar")
    .progressbar({ value: myPer })
    .children('.ui-progressbar-value')
    .html(myPer.toPrecision(3) + '%')
    .css("display", "block");

Answer 2

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

На момент публикации этого сообщения attr() вдругие свойства, кроме content - это просто рекомендация кандидата ¹ .Как только он будет реализован, можно создать индикатор выполнения только с одним элементом (например, 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) "%";
}

Вот текущее не работает демо .

---

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

Answer 3

Вы можете использовать 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>

Answer 4

Хотя можно построить индикатор выполнения с помощью 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>

Answer 5

Если вам нужно показать и скрыть индикатор выполнения внутри вашего 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>

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

Answer 6

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

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

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

Answer 7

Вы можете воссоздать индикатор выполнения с помощью CSS3-анимации, чтобы придать ему лучший вид.

JSFiddle Demo

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