» » » Дизайн для линии прогресса
101 0  

Дизайн для линии прогресса

К огромному сожелению элемент <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>


Пример:

  • Красный 65%
  • Синий 45%
  • Зеленый 35%
  • Прозрачный 75%

Оставить свой комментарий:

Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2019