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


82

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

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

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

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

Ответы:


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>

Скрипка

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


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-скриншот


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 !


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>


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>

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.