Прогресс бар имеет три цвета в завимости от процентов. Желтый если меньше 51%, светло зеленый если 51% и больше, синий если 100%. Процент устанавливается в атрибут data-progress Данные циклы компилят 100 селекторов с шириной от 1% до 100% и ещё 50 , в котором первые 50 другого цвета. html
<div class="b-progress-bar" data-progress="25">
<span class="b-progress-bar__line"></span>
</div>
less
@i: 0;
@increment:1%;
.loop (@i) when (@i <= 100) {
&[data-progress="@{i}"] {
.b-progress-bar__line {
width: (@increment * @i);
}
}
.loop(@i + 1);
}
.loop(@i);
.color (@i) when (@i <= 50) {
&[data-progress="@{i}"] {
.b-progress-bar__line {
background-color: @pb-background-start;
}
}
.color(@i + 1);
}
.color(@i);
&[data-progress="100"] {
.b-progress-bar__line {
background-color: @pb-background-end;
}
}