Нужна помощь с разметкой Uikit2

Иван Кузьмич

Постоялец
Регистрация
28 Дек 2018
Сообщения
50
Реакции
37
Здравствуйте
Подскажите пожалуйста,как мне вставить правильно перед каждым progress-bar текст?

Код:
<p><span style="color: #33cccc;"><strong>PHP</strong></span></p>
<div class="uk-progress">
<div class="uk-progress-bar" style="width: 97%;">97%</div>
</div>
<p><strong><span style="color: #33cccc;">MySQL</span></strong></p>
<div class="uk-progress">
<div class="uk-progress-bar" style="width: 83%;">83%</div>
</div>
<p><span style="color: #33cccc;"><strong>CSS</strong></span></p>
<div class="uk-progress">
<div class="uk-progress-bar" style="width: 68%;">68%</div>
</div>
И надо бы каждый бар сделать разными цветами
Спасибо
 
Последнее редактирование:
Нашёл самостоятельно ответ на свой же вопрос

Код:
<div class="uk-grid">
<div class="uk-width-1-5"><span style="color: #33cccc;"><strong>Текст</strong></span></div>
<div class="uk-width-4-5">
<div class="uk-progress">
<div class="uk-progress-bar" style="width: 97%;">97%</div>
</div>
</div>
<div class="uk-width-1-5"><span style="color: #ff6600;"><strong>Текст</strong></span></div>
<div class="uk-width-4-5">
<div class="uk-progress">
<div class="uk-progress-bar" style="width: 83%;">83%</div>
</div>
</div>
<div class="uk-width-1-5"><span style="color: #3366ff;"><strong>Текст</strong></span></div>
<div class="uk-width-4-5">
<div class="uk-progress">
<div class="uk-progress-bar" style="width: 68%;"><span style="color: #ffffff;">68%</span></div>
</div>
</div>
<div class="uk-width-1-5"><span style="color: #ff00ff;"><strong>Текст</strong></span></div>
<div class="uk-width-4-5">
<div class="uk-progress">
<div class="uk-progress-bar" style="width: 82%;"><span style="color: #ffffff;">82%</span></div>
</div>
</div>
<div class="uk-width-1-5"><span style="color: #99cc00;"><strong>Текст</strong></span></div>
<div class="uk-width-4-5">
<div class="uk-progress">
<div class="uk-progress-bar" style="width: 57%;"><span style="color: #ffffff;">57%</span></div>
</div>
</div>
</div>
А вот над цветом пока не решил вопрос
 
А вот над цветом пока не решил вопрос
Перед uk-progress ставим на выбор:
uk-progress-success
uk-progress-warning
uk-progress-danger

Результат
609b291e7311b6437523ad0c49efce5c.png
 
Последнее редактирование:
Назад
Сверху