как реализовать пользовательский индикатор выполнения

-2

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

.progressOuterBody { 
 
    border: 1px solid grey; 
 
    height: 25px; 
 
    border-radius: 64px; 
 
    padding: 1px 10px; 
 
} 
 
.progressBarInnerBody { 
 
    width: 25%; 
 
    background: red; 
 
    /* For browsers that do not support gradients */ 
 
    background-image: -webkit-linear-gradient(left, red, yellow); 
 
    /* For Safari 5.1 to 6.0 */ 
 
    background-image: -o-linear-gradient(right, red, yellow); 
 
    /* For Opera 11.1 to 12.0 */ 
 
    background-image: -moz-linear-gradient(right, red, yellow); 
 
    /* For Firefox 3.6 to 15 */ 
 
    border-radius: 45px; 
 
}

<div class="progressOuterBody"> 
 
    <div class="progressBarInnerBody"> 
 

 
    </div> 
 
</div>

источник

2016-11-21 guru buddy

@SumnerEvans Пожалуйста, смотрите мои code.I нужен цвет фона CSS. –

Если вы используете загрузчик, вы можете использовать их прогресс бары, а также. Они довольно настраиваются. Подробнее читайте здесь: http://www.w3schools.com/bootstrap/bootstrap_progressbars.asp

источник

2016-11-21 17:13:58

Мне нужен цвет фона css для индикатора выполнения. –

Я не уверен, что вы просите здесь. Вы хотите его цвет? Например, вы не знаете, что это за цвет? –

Мы можем применить только один цвет. Он имеет два цвета в фоновом режиме. –

Вы можете добавить еще <div> (.shade) в progressBarInnerBody. .shade покрывает весь ваш внутренний div и затем добавляет линейный градиент к этому .shade.

Update:

Добавленные полосы из вашей скрипки

Проблема в вашей скрипке:

Вы должны были добавлены полосы в progressBarInnerBody вместо в shade
Вам нужно p rovide в background-size к progressBarInnerBody

Вот фрагмент кода:

function slider_changed(e) { 
 
    $(".progressBarInnerBody").css('width', e.target.value + "%"); 
 
}

.progressOuterBody { 
 
    border: 1px solid grey; 
 
    height: 25px; 
 
    border-radius: 64px; 
 
    padding: 3px; 
 
} 
 
.progressBarInnerBody { 
 
    position: relative; 
 
    width: 80%; 
 
    height: 100%; 
 
    background: dodgerblue; 
 
    /* For browsers that do not support gradients */ 
 
    background-image: -webkit-linear-gradient(left, dodgerblue, dodgerblue); 
 
    /* For Safari 5.1 to 6.0 */ 
 
    background-image: -o-linear-gradient(right, dodgerblue, dodgerblue); 
 
    /* For Opera 11.1 to 12.0 */ 
 
    background-image: -moz-linear-gradient(right, dodgerblue, dodgerblue); 
 
    /* For Firefox 3.6 to 15 */ 
 
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); 
 
    border-radius: 45px; 
 
    background-size: 60px 60px; 
 
    animation: barberpole 0.5s linear infinite; 
 
} 
 
.shade { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: transparent; 
 
    /* For browsers that do not support gradients */ 
 
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), transparent); 
 
    /* For Safari 5.1 to 6.0 */ 
 
    background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), transparent); 
 
    /* For Opera 11.1 to 12.0 */ 
 
    background-image: -moz-linear-gradient(right, rgba(0, 0, 0, 0.5), transparent); 
 
    /* For Firefox 3.6 to 15 */ 
 
    border-radius: 45px; 
 
} 
 
@keyframes barberpole { 
 
    from { 
 
    background-position: 0 0; 
 
    } 
 
    to { 
 
    background-position: 60px 0; 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 

 
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
 

 
</head> 
 

 
<body> 
 

 
    <div class="progressOuterBody"> 
 
    <div class="progressBarInnerBody"> 
 
     <div class="shade"> 
 

 
     </div> 
 

 
    </div> 
 
    </div> 
 

 
    <input type="range" id="slider" value="80" oninput="slider_changed(event)"> 
 

 
</body> 
 

 
</html>

источник

2016-11-22 11:36:33 sam

Спасибо @sam .... –

@gurubuddy это помогло? – sam

это помогло, но когда я добавляю анимированные полосы css, тогда я не получаю взысканные полосы, как показано выше. Не могли бы вы мне помочь? –

как реализовать пользовательский индикатор выполнения

ответ

Смежные вопросы