3

введите сюда описание изображения

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

1
  • Ваша картинка примера не видна. 2 июн 2017 в 8:12

3 ответа 3

4

Самый простой пример это использовать 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>

Источник

4

Индикатор прогресса добавляется с помощью элемента . Значение индикатора определяется атрибутами 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>

0

В дополнение к ответу для 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.