Как сделать шкалу прогресса в виде заполняемых клеточек?

#html #css

Как сделать шкалу прогресса в виде заполняемых клеточек, как в примере выше?
Можно привести единичный пример.
    

Ответы

Ответ 1

Самый простой пример это использовать HTML5 тег progress:



.graph {
    width: 500px; /* width and height are arbitrary, just make sure the #bar styles
are changed accordingly */
    height: 30px;
    border: 1px solid #888; 
    background: rgb(168,168,168);
    background: -moz-linear-gradient(top, rgba(168,168,168,1) 0%, rgba(204,204,204,1)
23%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(168,168,168,1)),
color-stop(23%,rgba(204,204,204,1)));
    background: -webkit-linear-gradient(top, rgba(168,168,168,1) 0%,rgba(204,204,204,1)
23%);
    background: -o-linear-gradient(top, rgba(168,168,168,1) 0%,rgba(204,204,204,1) 23%);
    background: -ms-linear-gradient(top, rgba(168,168,168,1) 0%,rgba(204,204,204,1)
23%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a8a8a8',
endColorstr='#cccccc',GradientType=0 );
    background: linear-gradient(top, rgba(168,168,168,1) 0%,rgba(204,204,204,1) 23%);
    position: relative;
}
Статус
34%
complete




Источник


Ответ 2

Индикатор прогресса добавляется с помощью элемента . Значение индикатора определяется
атрибутами value, min и max:




В таблице стилей мы можем использовать селектор элемента для выбора элемента и добавления
правил для элемента . В ниже приведенном примере мы изменяем фоновый цвет, удаляем
обводку и скругляем углы на радиус равный половине высоты элемента.

progress {
    background-color: #f3f3f3;
    border: 0;
    height: 18px;
    border-radius: 9px;
}


Однако, каждый браузер обрабатывает правила немного по своему.
Таким образом для изменения полоски индикатора и текущего значения в браузере нужно
добавить псевдо-классы:

Вот пример общего рабочего кода прогресс бара.





	
	
	
	


	

		

			
			0%
		
	




Ответ 3

В дополнение к ответу для HTML5 вот вариант на чистом HTML/CSS



.label, .progress-bar, .progress-block  {
  float: left;
}
.label {
  margin-right: 50px;
}
.progress-block {
  width: 12px;
  height: 12px;
  margin: 2px 1px;
  background-color: #E6E6E6;
}
.progress-block.active {
  background-color: #B72F54;
}

  
PHOTOSHOP