Булики статуса строятся через canvas плагинм kottenator.github.io/jquery-circle-progress/. Файл самого плагина расположен в app/scripts/progress.js.
Документация плагина расположена на ГитХабе.
Пример для третьего пончика в первой строке:
<div class="third donut">
<div class="donut_type">50</div>
</div>Пример JS-кода для третьего пончика в первой строке:
$('.third.donut').donutProgress({
value: .5,
animation: false,
fill: '#2688eb',
startAngle: -Math.PI / 4 * -2
});Общее глобальное правило для настройки размеров, толщины основных линий, анимации и угла поворота для точки старта:
$('.donut').donutProgress({
size: 50,
animation: false,
thickness: 5,
startAngle: -Math.PI / 4 * 2
});Важно: предложенные варианты классов для разделения примеров типа .first, .second, .third, .forth не являются истинными! Я использовал их только в качестве примеров.
Вторая строка — это неактивные элементы. Им просто добавляется прозрачность классом .donut--blur.