Индикатор выполнения с HTML и CSS

82

Я хочу создать индикатор выполнения, как на изображении ниже:

Пример индикатора выполнения

Я понятия не имею, как это создать. Стоит ли использовать методы HTML5?

Не могли бы вы помочь мне создать этот индикатор выполнения?

html css progress-bar Шахин
источник

Ответы:

211 

#progressbar {
  background-color: black;
  border-radius: 13px;
  /* (height of inner div) / 2 + padding */
  padding: 3px;
}

#progressbar>div {
  background-color: orange;
  width: 40%;
  /* Adjust with JavaScript */
  height: 20px;
  border-radius: 10px;
}
<div id="progressbar">
  <div></div>
</div>
Развернуть фрагмент

Скрипка

(РЕДАКТИРОВАТЬ: изменено выделение синтаксиса; изменен потомок на дочерний селектор)

RoToRa
источник
3
Некоторым может показаться, что индикатор выполнения с центрированным процентным индикатором еще более полезен.
Tomáš Zato - Reinstate Monica
20

http://jsfiddle.net/cwZSW/1406/

#progress {
    background: #333;
    border-radius: 13px;
    height: 20px;
    width: 300px;
    padding: 3px;
}

#progress:after {
    content: '';
    display: block;
    background: orange;
    width: 50%;
    height: 100%;
    border-radius: 9px;
}
<div id="progress"></div>
Развернуть фрагмент

Призрак Мадары
источник
3
В зависимости от вашего браузера, который вам нужно использовать border-radius, -webkit-border-radiusили-moz-border-radius
Veger
Престижность за то, что на это ушло всего 3 минуты, вы должны быть суперталантливым человеком с индикатором прогресса! Вот Это Да!
Даниэль Тулп
@ Дэниел, спасибо! Приятно, когда люди замечают!
Призрак Мадары
6
Единственная проблема с этим решением заключается в том, что для кода JavaScript действительно сложно изменить длину псевдоэлемента: after, потому что он не является частью DOM. Если я чего-то не упускаю.
FrontierPsycho
17

Ответ 2014 года : с 2014 года HTML теперь 5 включает<progress> element не требующий JavaScript. Значение процента изменяется по мере продвижения, используя встроенный контент. Проверено только в webkit. Надеюсь, поможет:

jsFiddle

CSS:

progress {
	display:inline-block;
	width:190px;
	height:20px;
	padding:15px 0 0 0;
	margin:0;
	background:none;
	border: 0;
	border-radius: 15px;
	text-align: left;
	position:relative;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
}
progress::-webkit-progress-bar {
	height:11px;
	width:150px;
	margin:0 auto;
	background-color: #CCC;
	border-radius: 15px;
	box-shadow:0px 0px 6px #777 inset;
}
progress::-webkit-progress-value {
	display:inline-block;
	float:left;
	height:11px;
	margin:0px -10px 0 0;
	background: #F70;
	border-radius: 15px;
	box-shadow:0px 0px 6px #777 inset;
}
progress:after {
	margin:-26px 0 0 -7px;
	padding:0;
	display:inline-block;
	float:left;
	content: attr(value) '%';
}
<progress id="progressBar" max="100" value="77"></progress>
Развернуть фрагмент

Андреело
источник
По состоянию на 2020 год довольно хорошо поддерживается во всех браузерах: caniuse.com/#feat=progress
frackham
Разве не кажется нереалистичным сказать, что ему «не нужен Javascript»? Я имею в виду, что сам элемент представляет собой довольно простой визуальный компонент, но если вы когда-нибудь собираетесь получить от него какое-либо значение, вам НЕОБХОДИМО каким-то образом динамически устанавливать свойство «значение». Как это будет? Готов поспорить, угадать Javascript. Таким образом, возникает вопрос, действительно ли этот элемент обеспечивает такое удобство или выгоду, если на самом деле он мало что делает, а представляет что-то очень контролируемым образом.
Лев
4

Мне нравится этот:

очень гладко, только это как HTML, а остальные CSS3 обратно совместимы (хотя это будет меньше наглядности)

Изменить Добавлен код ниже, но взят непосредственно со страницы выше, все кредиты этому автору

.meter {
  height: 20px;
  /* Can be anything */
  position: relative;
  background: #555;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  border-radius: 25px;
  padding: 10px;
  -webkit-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
  -moz-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
}

.meter>span {
  display: block;
  height: 100%;
  -webkit-border-top-right-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
  -moz-border-radius-topright: 8px;
  -moz-border-radius-bottomright: 8px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  -webkit-border-top-left-radius: 20px;
  -webkit-border-bottom-left-radius: 20px;
  -moz-border-radius-topleft: 20px;
  -moz-border-radius-bottomleft: 20px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: #f1a165;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f1a165), color-stop(1, #f36d0a));
  background-image: -webkit-linear-gradient(top, #f1a165, #f36d0a);
  background-image: -moz-linear-gradient(top, #f1a165, #f36d0a);
  background-image: -ms-linear-gradient(top, #f1a165, #f36d0a);
  background-image: -o-linear-gradient(top, #f1a165, #f36d0a);
  -webkit-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
}
<div class="meter">
  <span style="width: 33%"></span>
  <!-- I use my viewmodel in MVC to calculate the progress and then use @Model.progress to place it in my HTML with Razor -->
</div>
Развернуть фрагмент

Даниэль Тулп
источник
2
Обратите внимание, что ответы только на ссылки не приветствуются, ответы SO должны быть конечной точкой поиска решения (по сравнению с еще одной остановкой ссылок, которые со временем устаревают). Пожалуйста, подумайте о добавлении здесь отдельного синопсиса, сохранив ссылку в качестве ссылки.
kleopatra 05
@kleopatra, спасибо за то, что вы сохранили наш сайт в рабочем состоянии. Я знаю, что только ссылки (конечно, на такие сайты, как jsfiddle) не рекомендуются. Я добавлю код, который использовал.
Даниэль Тулп
4

То же, что и ответ @ RoToRa, с некоторыми небольшими корректировками (правильные цвета и размеры):

body {
  background-color: #636363;
  padding: 1em;
}

#progressbar {
  background-color: #20201F;
  border-radius: 20px; /* (heightOfInnerDiv / 2) + padding */
  padding: 4px;
}

#progressbar>div {
  background-color: #F7901E;
  width: 48%;
  /* Adjust with JavaScript */
  height: 16px;
  border-radius: 10px;
}
<div id="progressbar">
  <div></div>
</div>
Развернуть фрагмент

Вот скрипка: jsFiddle

А вот как это выглядит: jsFiddle-скриншот

DaJF
источник
4

В современных браузерах вы можете использовать элемент прогресса CSS3 и HTML5!

progress {
  width: 40%;
  display: block; /* default: inline-block */
  margin: 2em auto;
  padding: 3px;
  border: 0 none;
  background: #444;
  border-radius: 14px;
}
progress::-moz-progress-bar {
  border-radius: 12px;
  background: orange;

}
/* webkit */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  progress {
    height: 25px;
  }
}
progress::-webkit-progress-bar {
    background: transparent;
}  
progress::-webkit-progress-value {  
  border-radius: 12px;
  background: orange;
} 
<progress max="100" value="40"></progress>
Развернуть фрагмент

Санхофон
источник
3

Индикатор выполнения без вложенных div ... для каждого элемента, в котором работает линейный градиент css.

Здесь JSFiddle http://jsfiddle.net/oj1L3y6t/2/

function show_progress(i) {
  var progress1 = i;
  var progress2 = progress1 + 1;
  var progress3 = progress1 + 2;

  var magic = "linear-gradient(to right, #FFC2CE " + progress1 + "% ,red " + progress2 + "% , #FFFFFF " + progress3 + "%)";
  document.getElementById("progress-0").style.background = magic;

  var magic = "linear-gradient(to right, lightblue " + progress1 + "% , lightgreen " + progress2 + "%)";
  document.getElementById("progress-1").style.background = magic;

  var magic = "linear-gradient(to right, lightblue " + progress1 + "% , #FFFFFF 100%)";
  document.getElementById("progress-2").style.background = magic;

  var magic = "linear-gradient(#FFC2CE " + progress1 + "% ,red " + progress2 + "% , #FFFFFF " + progress3 + "%)";
  document.getElementById("progress-3").style.background = magic;
}

function timeout() {
  t = setTimeout(function() {
    show_progress(t)
    timeout();
  }, 50);
  if (t == 78) {
    clearTimeout(t);
  }
  console.log(t);
}

timeout();
#progress-0 {
  border: 1px solid black;
  width: 500px;
  background: #999;
  text-align: center;
}

#progress-1 {
  border: 1px solid black;
  width: 500px;
  background: #999;
  text-align: center;
  margin-top: 10px;
  border-radius: 10px;
}

#progress-2 {
  border: 1px solid black;
  width: 500px;
  background: #999;
  text-align: center;
  margin-top: 10px;
}

#progress-3 {
  border: 1px solid black;
  width: 100px;
  height: 100px;
  background: #999;
  line-height: 100px;
  text-align: center;
  margin-top: 10px;
  border-radius: 200px;
}
<div id="progress-0">Loading</div>
<input id="progress-1" value="Loading"></input>
<button id="progress-2">Loading</button>
<p id="progress-3">Loading</p>
Развернуть фрагмент

Джеймс
источник
2

Создайте элемент, который показывает левую часть стержня (круглая часть), также создайте элемент для правой части. Для фактического индикатора выполнения создайте третий элемент с повторяющимся фоном и шириной, которая зависит от фактического прогресса. Поместите все это поверх фонового изображения (содержащего пустой индикатор выполнения).

Но я полагаю, вы это уже знали ...

Изменить : при создании индикатора выполнения, который не использует текстовый фон. Вы можете использовать, border-radiusчтобы получить эффект раунда, как показали Рикудо Сеннин и RoToRa !

Veger
источник
1 

.loading {
  position: relative;
  width: 50%;
  height: 200px;
  border: 1px solid rgba(160, 160, 164, 0.2);
  background-color: rgba(160, 160, 164, 0.2);
  border-radius: 3px;
}

span.loader {
  position: absolute;
  top: 40%;
  left: 10%;
  width: 250px;
  height: 20px;
  border-radius: 8px;
  border: 2px solid rgba(160, 160, 164, 0.8);
  padding: 0;
}

span.loader span.innerLoad {
  text-align: center;
  width: 140px;
  font-size: 15px;
  font-stretch: extra-expanded;
  color: #2A00FF;
  padding: 1px 18px 3px 80px;
  border-radius: 8px;
  background: rgb(250, 198, 149);
  background: -moz-linear-gradient(left, rgba(250, 198, 149, 1) 0%, rgba(245, 171, 102, 1) 47%, rgba(239, 141, 49, 1) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(250, 198, 149, 1)), color-stop(47%, rgba(245, 171, 102, 1)), color-stop(100%, rgba(239, 141, 49, 1)));
  background: -webkit-linear-gradient(left, rgba(250, 198, 149, 1) 0%, rgba(245, 171, 102, 1) 47%, rgba(239, 141, 49, 1) 100%);
  background: -o-linear-gradient(left, rgba(250, 198, 149, 1) 0%, rgba(245, 171, 102, 1) 47%, rgba(239, 141, 49, 1) 100%);
  background: -ms-linear-gradient(left, rgba(250, 198, 149, 1) 0%, rgba(245, 171, 102, 1) 47%, rgba(239, 141, 49, 1) 100%);
  background: linear-gradient(to right, rgba(250, 198, 149, 1) 0%, rgba(245, 171, 102, 1) 47%, rgba(239, 141, 49, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fac695', endColorstr='#ef8d31', GradientType=1);
}
<div class="loading">
  <span class="loader">
     	<span class="innerLoad">Loading...</span>
  </span>
</div>
Развернуть фрагмент

user2579594
источник
1 
    .black-strip
{   width:100%;
    height: 30px;       
    background-color:black; 
}

.green-strip
{   width:0%;           
    height: 30px;       
    background-color:lime;
    animation-name: progress-bar;           
    animation-duration: 4s;  
    animation-iteration-count: infinite; 
}

@keyframes progress-bar { 
    from{width:0%} 
    to{width:100%} 
}

    <div class="black-strip">
        <div class="green-strip">
        </div>
   </div>
Муджахид Хусейн
источник
0

Если вы хотите иметь индикатор выполнения без добавления кода PACE может стать для вас отличным инструментом.

Просто включите pace.js и тему CSS по вашему выбору, и вы получите красивый индикатор загрузки вашей страницы и навигации AJAX. Лучшее в PACE - это автоматическое определение прогресса.

Он также содержит различные темы и цветовые схемы.

Стоит попробовать.

Анураг Верма
источник
0 
.bar {
background - color: blue;
height: 40 px;
width: 40 px;
border - style: solid;
border - right - width: 1300 px;
border - radius: 40 px;
animation - name: Load;
animation - duration: 11 s;
position: relative;
animation - iteration - count: 1;
animation - fill - mode: forwards;
}

@keyframes Load {
100 % {
    width: 1300 px;border - right - width: 5;
}
Тайлер Донат
источник
это то, что я использовал ... для проекта кодирования в средней школе, это не самый красивый, но работает
Тайлер Донат
1
Это не только не самый красивый, но еще и недействительный. В свойствах CSS нет пробелов. Например background - color: blue;должно бытьbackground-color: blue;
Matijs
0

Использование setInterval.

var totalelem = document.getElementById("total");
var progresselem = document.getElementById("progress");
var interval = setInterval(function(){
    if(progresselem.clientWidth>=totalelem.clientWidth)
    {
        clearInterval(interval);
        return;
    }
    progresselem.style.width = progresselem.offsetWidth+1+"px";
},10)
.outer
{
    width: 200px;
    height: 15px;
    background: red;
}
.inner
{
    width: 0px;
    height: 15px;
    background: green;
}
<div id="total" class="outer">
    <div id="progress" class="inner"></div>
</div>
Развернуть фрагмент

Использование CSS Transtitions.

function loading()
{
    document.getElementById("progress").style.width="200px";
}
.outer
{
    width: 200px;
    height: 15px;
    background: red;
}
.inner
{
    width: 0px;
    height: 15px;
    background: green;
    -webkit-transition:width 3s linear;
    transition: width 3s linear;
}
<div id="total" class="outer">
    <div id="progress" class="inner"></div>
</div>
<button id="load" onclick="loading()">Load</button>
Развернуть фрагмент

Виньеш Раджа
источник
0

Существует учебник для создания прогресса бара HTML5 здесь . Если вы не хотите использовать методы HTML5 или ищете решение для всех браузеров, попробуйте этот код:

<div style="width: 150px; height: 25px; background-color: #dbdbdb;">
  <div style="height: 25px; width:87%; background-color: gold">&nbsp;</div>
</div>
Развернуть фрагмент

Вы можете изменить ЗОЛОТОЙ цвет на любой цвет индикатора выполнения и #dbdbdb на цвет фона индикатора выполнения.

Канницид
источник
-3

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

<form> <!--(extra code)-->
<!--first progress bar:-->
<img src="directory"></img>
<!--second progress bar:-->
<img src="directory"></img>
<!--et caetera...-->
</form>

Теперь это кажется простым, не так ли?

user4093060
источник