如何在html中显示不同颜色的进度条答案

【问题标题】：how to show progress bar in html with different colors如何在html中显示不同颜色的进度条
【发布时间】：2013-04-03 06:57:08
【问题描述】：

我希望进度条应该有三个不同的，比如说从 o t0 40 是蓝色的，40 到 80 是红色的，从 80 到 100 是绿色的。我已经搜索了很多，但我得到的只是简单的进度条移动。有没有办法做到这一点。

我正在使用我得到的以下代码，但它也没有移动。

  <!doctype html>
  <html lang="en">
  <head>
  <meta charset="utf-8" />
  <title>jQuery UI Progressbar - Default functionality</title>
  <link rel="stylesheet"  href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
   $(function() {
   $( "#progressbar" ).progressbar({
    value: 37
  });
 });

 </script>
 </head>
 <body>
 <div id="progressbar"></div>
 </body>
 </html>

【问题讨论】：

你应该试试这个链接：stackoverflow.com/questions/6013067/…

标签： javascript jquery html jquery-ui progress-bar

【解决方案1】：

我不知道它在 Jquery UI 中是怎样的，但你可以简单地使用 CSS 并制作 2 层，一层是蒙版，另一层是图像，其中 40% 的宽度为蓝色，10 个 40-80 红色和 80 - 100 绿然后你需要发现它。

在 JQuery 上，您需要隐藏此遮罩，它会显示下面的图层。

我用谷歌搜索，我找到了回答你问题的主题

jQuery UI: How to change the color of a ProgressBar?

检查一下。

【讨论】：

它有不同的颜色，但我想在单个条中使用三种不同的颜色

【解决方案2】：

尝试将此 Css 代码应用到您的#progressbar

#progressbar{
width:300px;height:14px;
 background-color:#00aeff;
 filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#00aeff, endColorstr=#ff0000);
 background-image:-moz-linear-gradient(left, #00aeff 40%, #ff0000 80%,#2fff00 100%);
background-image:linear-gradient(left, #00aeff 40%, #ff0000 80%,#2fff00 100%);
background-image:-webkit-linear-gradient(left, #00aeff 40%, #ff0000 80%,#2fff00 100%);
background-image:-o-linear-gradient(left, #00aeff 40%, #ff0000 80%,#2fff00 100%);
background-image:-ms-linear-gradient(left, #00aeff 40%, #ff0000 80%,#2fff00 100%);
 background-image:-webkit-gradient(linear, left bottom, right bottom, color-stop(40%,#00aeff), color-stop(80%,#ff0000),color-stop(100%,#2fff00));}

【讨论】：

【解决方案3】：

听起来您想在更改事件中挂钩并检查进度在哪里，然后从中重新着色栏。看着The API，它看起来是双重的

【讨论】：

【解决方案4】：

想到的两种不同方法（如果您不想使用 chermanarun 提到的 CSS3 渐变：

背景图像：如果您知道进度条的宽度，只需创建一个在您指定的点设置三种颜色的背景图形。将此背景应用于进度指示器。
分层条：这要求您将前两个条的增长“限制”在进度的上限范围内（因此条 1 的宽度不能超过 40%，条 2 的宽度不能超过80%）。使用 CSS 定位和 z-indexing 使所有条具有相同的左侧/顶部位置，并将它们堆叠（顶部 1 条，中间条 2，底部 3 条）。随着加载进度条的增长，前两个将停止在其上限处，允许下面的条继续前进，给人一种无缝进度的错觉。

【讨论】：

#progressbar .ui-progressbar-value { background: blue url(path/to/your/image.png) no-repeat left top; } 这个 CSS 应该应用你的图像，而不是 jQuery UI 提供的默认灰色渐变。默认情况下将 bg 颜色设置为蓝色（将其更改为图像中使用的蓝色的十六进制代码）允许在较慢的连接上加载背景图像。