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

479

03 июня 2017, 14:16

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

Answer 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; 
}

Статус 
<progress value="34" max="100"><div id="progress" class="graph"><div id="bar" style="width:34%"><p>34% complete</p></div></div></progress>

Источник

Answer 2

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

<progress value="10" max="100"></progress>

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

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

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

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

<html> 
<head> 
	<title>Индикатор прогресса HTML5 | Материалы сайта RUSELLER.COM</title> 
	<meta charset="utf-8"> 
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
	<script> 
		$(document).ready(function() { 
				var progressbar = $('#progressbar'), 
					max = progressbar.attr('max'), 
					time = (1000/max)*5,	 
			        value = progressbar.val(); 
 
			    var loading = function() { 
			        value += 1; 
			        addValue = progressbar.val(value); 
			         
			        $('.progress-value').html(value + '%'); 
 
			        if (value == max) { 
			            clearInterval(animate);			            
			        } 
			    }; 
 
			    var animate = setInterval(function() { 
			        loading(); 
			    }, time); 
		}); 
	</script> 
</head> 
<body> 
	<div class="demo-wrapper html5-progress-bar"> 
		<div class="progress-bar-wrapper"> 
			<progress id="progressbar" value="0" max="100"></progress> 
			<span class="progress-value">0%</span> 
		</div> 
	</div> 
</body> 
</html>

Answer 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; 
}

<div class='container'> 
  <div class='label'>PHOTOSHOP</div> 
  <div class='progress-bar'> 
    <div class='progress-block active'></div> 
    <div class='progress-block active'></div> 
    <div class='progress-block active'></div> 
    <div class='progress-block active'></div> 
    <div class='progress-block active'></div> 
    <div class='progress-block active'></div> 
    <div class='progress-block'></div> 
    <div class='progress-block'></div> 
    <div class='progress-block'></div> 
    <div class='progress-block'></div> 
  </div> 
</div>