Заполнение Индикатора выполнения - Реализация jQuery

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

Вы можете использовать один div и изображение, как я упоминал ранее в комментарии. Вот как это сделать. (Не полностью протестирован, поэтому может сломаться.)

HTML:

<div id="progressBar"></div>

CSS:

 #progressBar {
   width: 200px;
   height: 20px;
   background: url('http://o.imm.io/x9E.jpg') no-repeat;
   background-position: -200px 0px;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
}

JS:

function setProgress(target,value) {

  var oldPosition = $(target).css("backgroundPosition");

  // Log the old position 
  console.log("Old position: " + oldPosition);
  var newPosition = parseInt(oldPosition) + parseInt(value);

  // Log the new position
  console.log("New position: " + newPosition);
  $(target).animate({backgroundPosition: newPosition + 'px 0px'})
}

Edit : Я добавил закругленные углы, и он работает точно так, как вы указали, никаких проблем с закругленные углы.

Edit 2 : ознакомьтесь с версией этого кода JSBin .

Редактировать 3 : Как сказано в OP, им нужно было гибкое изменение размера индикатора выполнения. Эта реализация этого не сделает. Я собираюсь порекомендовать (как и раньше) использовать панель выполнения jQueryUI . Он прост в использовании и довольно легкий.

Редактировать 4 : Я придумал другую реализацию этого, которая требует немного больше Javascript, но вы можете проверить ее здесь: http://jsfiddle.net/ntnz4/7/

Вы можете использовать 2 блока, один внутри другой, поместите фон на внутренний и установите его ширину с помощью%, примерно так:

<div style="">
    <div style="background: red; width: 50%">&nbsp;</div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Я сделал то, что вы делаете для нескольких моих сайтов, вот что я сделал:

Сначала я сделал базовую разметку:

<div id="progressBar">
    <div id="progressBarInner"></div>
</div>

И CSS:

#progressBar {
    width: 200px;
    height: 20px;
}

#progressBarInner {
    background: url('path/to/your/progress/image.jpg');
    width: 100%;
    height: 100%;
}

Когда это будет сделано, установить прогресс действительно очень просто . Какой бы прогресс вы ни хотели отображать на индикаторе выполнения, вы устанавливаете ширину элемента #ProgressBarInner . Например, если вы хотите показать 32%, вы должны установить это:

width: 32%

для progressBarInner div.

Я не знаю, как это сделать с помощью jQuery, но я точно знаю, что с его помощью можно установить свойства CSS, так что это вполне возможно.

HTML:

<div class="progress"><div style="width:30%"></div></div>

CSS:

    .progress {
    width: 300px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.progress div {
    background: url(background.png);
    height: 10px;
    -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px;
    -webkit-border-top-right-radius: 5px; -webkit-border-top-right-radius: 5px;
}

Я немного не понимаю, что вы хотите сделать в отношении закругленных углов на залитом цвете! Но если предполагается, что он будет продвигаться прямо, а не закругляться, просто установите обертку div с css overflow:hidden;

При этом внутренний div будет продвигаться до 100% и при прохождении закругленной области создаст классный эффект!