Progress Bar с добавленным элементом

Question

Я должен создать своего рода индикатор прогресса/счетчика/метра на веб-странице.

В основном я получаю данные (общее количество часов, в данном случае 500h и количество часов, 400h в примере) от JSON и соответственно загружают планку.

Я попытался адаптировать jqueryUI и бутстрапы прогресса, но я застреваю при реализации круга с доступными часами.

Использование начальной загрузки структуры

<div class="progress"> 
    <div id="progressbar" class="progress-bar" role="progressbar" aria-valuemin="0"> 
    <span id="pProgress"></span> 
    </div> 
    <div id="circleProgress" class="progress-bar transBar" role="progressbar"> 
    <span id="pCircle"></span> 
    </div> 
</div> 

С начальной загрузки может суммироваться бруски, я имел Ideia к, а второй бар, это может быть круг, так что будет следить за прогресс бар, но так как прогресс div имеет высоту, круг обрезается. Пробовал положение абсолютным, но не получил.

Также попытался поместить круг во второй div, параллельно с классом = «прогресс», но не смог определить способ вычисления положения прогрессивной панели.

Поэтому я ищу любые советы, решения или места, чтобы найти решение для решения моей проблемы.

редактировать Извините за отсутствие деталей, сделал скрипку - http://jsfiddle.net/hmt0L07r/1/

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

Answer 1

Я создал грубую панель прогресса на jsfiddle. Его довольно просто, используйте дату, которую вы получаете от JSON через ajax и делаете некоторую математику, а не добавляете ее в элемент. С помощью некоторого css3 вы также можете анимировать весь бар.

var reachedh = 233, 
    totalh = 500, 
    availableh = 400, 
    reachedhPercent = (reachedh/totalh)*100, 
    availablehPercent = (availableh/totalh)*100; 


$('#pProgress').css({'width':reachedhPercent+'%'}); 
$('#availableh').css({'left':availablehPercent+'%'}); 
$('#availableh').text(availableh+'h'); 

http://jsfiddle.net/5jnn6sqj/

EDIT: Fiddle с основным стилем и анимацией. Также я добавил панель доступных часов, я только что увидел пузырь раньше. http://jsfiddle.net/5jnn6sqj/1/

Answer 2

Я искал хороший сайт, и нашел http://getbootstrap.com/components/#progress. Этот сайт может пригодиться. Попробуйте сделать <div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> <span class="sr-only">40% Complete (success)</span> </div> </div>