Дизайн для линии прогресса
К огромному сожелению элемент <progress> так и е поддается на смену дизайна, пока браузеры не очень с ним дружат.
В этом примере линия прогресса реализована через списки - очень удобно для нескольких линий. Чтобы поменять цвет достаточно сменить значения цвета в 3 последних стилях.
Специально указал длину в html - может кому нужно число через скрипт вывести или движок сайта.
Исходный код прогресса:
<ul class="progress-bar">
<li>
<i style="width:65%">Красный <span>65%</span></i>
<div class="progr-red"><s style="width:65%"></s></div>
</li>
<li>
<i style="width:45%">Синий <span>45%</span></i>
<div class="progr-sun"><s style="width:45%"></s></div>
</li>
<li>
<i style="width:35%">Зеленый <span>35%</span></i>
<div class="progr-zel"><s style="width:35%"></s></div>
</li>
<li>
<i style="width:75%">Прозрачный <span>75%</span></i>
<div><s style="width:75%"></s></div>
</li>
</ul>
<style>
/*- LINIA PROGRESA -*/
.progress-bar {list-style:none}
.progress-bar li{margin:10px 0 10px 0;}
.progress-bar i{position:relative;display:block;}
.progress-bar span{position:absolute;right:0;top:0;}
.progress-bar div {border: none;width: 100%; height: 20px;background:#e3e3e3;border-radius: 3px;box-shadow:0 2px 3px rgba(0,0,0,.5) inset;}
.progress-bar s {display:block;height: 20px;border-radius: 3px; background-size: 50px 50px; background-image: linear-gradient(135deg, rgba(255, 255, 255, .2) 25%, transparent 25%,transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,transparent 75%, transparent); animation: animate-stripes 18s linear infinite;}
.progr-red s{background-color: #a41d0b;}
.progr-zel s{background-color: #45a40b;}
.progr-sun s{background-color: #0b4fa4;}
@keyframes animate-stripes {0% {background-position:0 0;}100% {background-position:100% 0;}}
</style>Пример: