1

我想将剑道的不确定进度条的颜色从灰色更改为浅蓝色，如下图所示：

在此处输入图像描述

我还想在进度条中添加一个自定义标签，例如

在此处输入图像描述

请在下面找到代码： 

<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。我已经检查了一些样式，但那是用于具有某些确定值的进度条。对于不确定找不到任何。

4

2 回答 2

1

首先是你用来制作进度条的东西。就像如果您在 w3 学校进度条上使用 w3.css 进度条，那么它非常简单

<!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 代码更新您的问题，以便我们仅针对您的特定栏为您提供帮助

如果你可以灵活地改变你的酒吧，那么你可以使用这个链接

进度条码

编辑 如果你不坚持使用剑道你可以使用引导程序它会解决你的问题代码是这样的

<!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>

于 2016-12-28T10:45:27.343 回答
0

我遇到了一个更改 HTML 进度条颜色的解决方案：

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

仍在寻找如何向其中添加内容。此解决方案适用于 HTML 进度元素而不是 Kendo 进度条。

于 2016-12-28T11:25:23.580 回答