Измените цвет неопределенного индикатора выполнения Kendo и добавьте к нему собственную метку

Я хочу изменить цвет неопределенного индикатора выполнения Kendo с серого на светло-синий, как показано на рисунке ниже:

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

Еще одна вещь, которую я хотел бы добавить пользовательский ярлык в индикатор выполнения, как

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

Пожалуйста, найдите код ниже:

<div style="top:50%; left:50%">        
            <div style="width: 180px; height: 20px; " id="progressbar"></div>
        </div>
    <script>
        var passProgress  = $("#progressbar").kendoProgressBar({
            value: false,
            width: 100,
            height: 20
        });
    </script>

Я не очень хорош с CSS. Я проверил некоторые стили, но это для индикатора выполнения с некоторыми определенными значениями. Для неопределенного не смог найти ни одного.

Источник

2 ответа

Прежде всего, что вы используете для создания индикатора. Например, если вы используете индикатор прогресса w3.css на школьном индикаторе w3, то это довольно просто.

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>

<div class="w3-container">
  

  <div class="w3-progress-container">
    <div class="w3-progressbar w3-green" style="width:25%">
      <div class="w3-center w3-text-white">Loading...</div>
    </div>
  </div><br>


</body>
</html>

Если вам нужна дополнительная помощь, пожалуйста, обновите ваш вопрос, используя текущий HTML и CSS-код, который вы используете, чтобы мы могли помочь вам только с вашей конкретной панелью.

и если вы можете изменить свой бар, вы можете использовать эту ссылку

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

РЕДАКТИРОВАТЬ, если вы не непреклонны в использовании Kendo. Вы можете использовать bootstrap, это решит вашу проблему, код выглядит так

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Animated Progress Bar</h2>
  <p>The .active class animates the progress bar:</p> 
  <div class="progress">
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
      Loading...
    </div>
  </div>
</div>

</body>
</html>

Источник

Я нашел решение изменить цвет индикатора выполнения HTML:

https://jqueryui.com/resources/demos/progressbar/indeterminate.html

Еще смотрю как добавить контент к нему. Это решение для элемента прогресса HTML, а не Kendo Progressbar.

Источник
Другие вопросы по тегам