Индикаторы (теги progress и meter), ползунок <input type="range"/> | CSS и HTML

• Тег progress HTML
• Тег meter HTML
• Ползунок HTML
• Переключатели только с двумя значениями on/off
• Полоса прокрутки HTML
• Типы input HTML5
• Скрипт калькулятора стоимости на JavaScript

Тег progress HTML

progress (w3.org) показывает процент завершения работ. Например, степень заполнения формы или загрузки страницы.

30% <progress value="30" max="100">30%</progress>

Как изменить его стиль CSS, например, для резиновой вёрстки: 30%

<style>
progress { /* контейнер */
  -webkit-appearance: none; /* убрать вид, который задан браузером по умолчанию */
          appearance: none;
  border: none; /* убрать рамку в Firefox */
  width: 100%;
  height: 20px;  
  border-radius: 3px; 
  color: #4d7198; /* цветная линия-индикатор в IE */
  background: #eee;
  background-image: linear-gradient(to right, #e4e4e4 1px, transparent 1px),
    linear-gradient(rgba(0, 0, 0, .2) 1px, rgba(255, 255, 255, .4) 1px, rgba(0, 0, 0, .2));
  background-size: 10% 100%, 100% 100%;
}
.progress::-webkit-progress-bar { /* контейнер в Webkit */
  border-radius: 3px;
  background: #eee;
  background-image: linear-gradient(to right, #e4e4e4 1px, transparent 1px),
    linear-gradient(rgba(0, 0, 0, .2) 1px, rgba(255, 255, 255, .4) 1px, rgba(0, 0, 0, .2));
  background-size: 10% 100%, 100% 100%;
}
.progress::-moz-progress-bar { /* разноцветная линия-индикатор в Firefox */
  border-radius: 3px 5px 5px 3px;
  background: #4d7198;
  background-image:
    linear-gradient(135deg, transparent, transparent 33%, rgba(0, 0, 0, .1) 33%, rgba(0, 0, 0, .1) 66%, transparent 66%),
    linear-gradient(rgba(0, 0, 0, .2) 1px, rgba(255, 255, 255, .4) 1px, rgba(0, 0, 0, .2)),
    linear-gradient(to left, #00baff, #4d7198);
  background-size: 35px 20px, 100% 100%, 100% 100%;
}
.progress::-webkit-progress-value { /* разноцветная линия-индикатор в Webkit */
  border-radius: 3px 5px 5px 3px;
  background: #4d7198;
  background-image:
    linear-gradient(135deg, transparent, transparent 33%, rgba(0, 0, 0, .1) 33%, rgba(0, 0, 0, .1) 66%, transparent 66%),
    linear-gradient(rgba(0, 0, 0, .2) 1px, rgba(255, 255, 255, .4) 1px, rgba(0, 0, 0, .2)),
    linear-gradient(to left, #00baff, #4d7198);
  background-size: 35px 20px, 100% 100%, 100% 100%;
  -webkit-animation: animate-stripes 4s linear infinite;
}
@-webkit-keyframes animate-stripes { 
  0% { background-position: 0 0, 0 0, 0 0; } 
  100% { background-position: -105px 0, 0 0, 0 0; } 
}
</style>
<progress value="30" max="100">30%</progress>

Статья в тему: «Индикатор прокрутки страницы с плавающей шапкой»

Тег meter HTML

meter (w3.org) определяет цифровое значение в неком диапазоне. В зависимости от положения на шкале линия будет принимать разный цвет.

110 <meter min="-200" low="0" high="100" max="150" optimum="120" value="110">110</meter>
50 <meter min="-200" low="0" high="100" max="150" optimum="120" value="50">50</meter>
-100 <meter min="-200" low="0" high="100" max="150" optimum="120" value="-100">-100</meter>
-200 <meter min="-200" low="0" high="100" max="150" optimum="120" value="-200">-200</meter>

атрибут	описание	по умолчанию
min	самое низкое значение	0
low	с min до low - диапазон низких значений; с low до high - диапазон средних значений	min
high	с low до high - диапазон средних значений; с high до max - диапазон высоких значений	max
max	самое высокое значение	1.0
optimum	определяет предпочтительную окраску диапазонов. Для того, чтобы понять о чём речь, поменяем его значение 120 10 -100	(max+min)/2
value	текущее значение	0

Стилизацию можно посмотреть у css-tricks.com.

Ползунок HTML

<input type="range"/> (w3.org) в отличии от предыдущих двух элементов может изменяться самим пользователем благодаря перетаскиванию ползунка курсором мышки.

<input type="range" min="10" max="120" step="5" value="30"/>

атрибут	описание	по умолчанию
value	текущее значение	(max+min)/2
min	самое низкое значение	0
max	самое высокое значение	100
step	шаг изменения значения	1
list	нет поддержки браузерами	-

Его можно стилизовать благодаря псевдоэлементам CSS и сделать интерактивные динамические штучки на сайте благодаря JavaScript. Например, здесь получилось наглядно и просто продемонстрировать действие свойства border-image-slice.

<style>

/* линия-индикатор */

#rangeP {  /* контейнер */
  -webkit-appearance: none;
          appearance: none;
  padding: 0;
  border: 10px solid #ccc;
  border-radius: 5px;
  box-shadow: inset 0 1px #ccc, inset 0 1px 1px #575555, inset 0 -2px #ccc;
  background: #fff linear-gradient(#BCBCBC, #fff0f5);
  overflow: hidden;
}
#rangeP::-moz-range-thumb {  /* ползунок в Firefox */
  border-radius: 2px;
  box-shadow: -13px 0 #40310a, -26px 0 #40310a, -39px 0 #40310a, -52px 0 #40310a, -65px 0 #40310a, -78px 0 #40310a, -91px 0 #40310a, -104px 0 #40310a, -117px 0 #40310a, -130px 0 #40310a, -143px 0 #40310a, -156px 0 #40310a;
}
#rangeP::-moz-range-track {  /* линия, по которой он ездит в Firefox */
  background: none;
  border: none;
}
#rangeP::-webkit-slider-thumb {  /* ползунок в Хроме */
  -webkit-appearance: none;
  width:15px;
  height:15px;
  border: 1px solid #818181;
  border-radius: 2px;
  background-image: linear-gradient(#dedede, #f2f2f2);
  box-shadow: -13px 0 #40310a, -26px 0 #40310a, -39px 0 #40310a, -52px 0 #40310a, -65px 0 #40310a, -78px 0 #40310a, -91px 0 #40310a, -104px 0 #40310a, -117px 0 #40310a, -130px 0 #40310a, -143px 0 #40310a, -156px 0 #40310a;
}

/* банка CSS */

#banka {
  position: relative;
  width: 50%;
  margin: 0 auto;
  padding-top: 60%;
  border: 5px solid rgba(221,221,221,.9);
  border-radius: 40%/70%;
  background: linear-gradient(to right, rgba(221,221,221,.5), rgba(150,150,150,.5)), linear-gradient(#ff0000, #ffff00);
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: auto, 100% 0;
}

#banka:after {
  content: "";
  position: absolute;
  top: -3%;
  left: 22%;
  width: 55%;
  padding-top: 10%;
  border-radius: 60%;
  background: rgba(238,238,238,.6);
  box-shadow: 0 0 15px rgba(238,238,238,.9);
}

#banka:before {
  content: "";
  position: absolute;
  top: -10%;
  left: 15%;
  width: 70%;
  padding-top: 25%;
  border-radius: 40%;
  background: linear-gradient(rgba(150,150,150,.8), rgba(221,221,221,.3) 75%, rgba(221,221,221,.1) 75%);
}
</style>


<input type="range" oninput="onchangeWidth()" id="rangeP" value="0" max="90"/>
<div id="banka"></div>

<script>
function onchangeWidth() {
document.getElementById('banka').style.backgroundSize = 'auto, 100% ' + document.getElementById('rangeP').value + '%';
}
</script>