Is there any way to split the jquery UI progress bar into different sections, as well as support> 100%?

Question

I am considering using the jquery progress bar, but I have two requirements that are not supported:

• The ability to put another section in the progress bar. For example, instead of just having:

Only 100, current 50 (so the lane is filled). which will look like this:

I would like to be able to show:

A total of 100, Current 50 (which is divided into 20 from Project A, 30 from Project B and 10 from Project C), where sections A and B can have some different visualization as follows:

2. The ability to show the number> 100%. I use this to track a fundraising event, so its likely that the $$ earned is greater than the goal, so the progress bar should continue to go beyond the progress bar.

Does the jquery ui indicator support progress in these use cases? Is there another javascript plugin or control that is recommended for this use case?

Answer 1

Here is the basic and Css Free override for jqueryUi progressbar:

• multimize gets the progressbar identifier and an array of selected colors, this function splits the original progress bar into a new version with several bars according to the length of the color array.
• multiUpdate , calling this method for the progress bar, this function gives the values ​​of progressbarId and Array values ​​of the columns.

smaller than I did: just cloning the source bar to many others and using a table to display statistics on each bar. code length is related to included styles, but you can compress it by at least 30% of this.

Edit:

Added support for Numbers> 100

---

  // this method overrides jqueriUi progress bar // the length of <colors> will be number of breakes // this method also add a table that presents percentage in position function multimize(progressBarId, colors, max) { var pbar = $("#"+progressBarId); pbar.progressbar({ value: 100 }); pbar.data('max', max); pbar.css("position", "relative"); $("#"+progressBarId+" div").css({"position": "absolute", "background": colors[colors.length-1],"border":"none"}).attr("id", progressBarId+"_sub"+(colors.length-1)); var textTable = $('<table></table>').css({"border":"none", "position":"absolute", "color":"white", "width":"100%", "height":"100%"}).attr("id", progressBarId+"_tbl"); var textRow = textTable.append($('<tr></tr>')).css({"text-align":"center"}); textRow.append($('<td>d</td>')); for (var i=colors.length-2; i>=0; i--) { $("#"+progressBarId+" div").clone().appendTo("#"+progressBarId) .css({"position": "absolute", "background": colors[i], "border-radius": "0", "width": "1%"}) .attr("id", progressBarId+"_sub"+i); textRow.append($('<td>d</td>')).css({"text-align":"center"}); } pbar.append(textTable); } // this method will be update multimized progressbars // this method automatically finalize progressbar function multiUpdate(progressBarId, values) { var pbar = $("#"+progressBarId); var i,total = 0; var percentes = []; for (i=0; i<values.length; i++) total += values[i]; $("#"+progressBarId+"_tbl").css("width", (total*(100/pbar.data('max')))+"%") for (i=0; i<values.length; i++) { var perc = values[i]/total*100*(total/100)*(100/pbar.data('max')); percentes.push((i==0)?perc:perc+percentes[i-1]); $("#"+progressBarId+"_sub"+i).css({"width": percentes[i]+"%"}); $("#"+progressBarId+"_tbl td:eq("+i+")").text(Math.floor(values[i])).css("width", (values[i]/total)+"%"); } if (total >= pbar.data('max')) { finilize(progressBarId); } } function finilize(progressBarId) { // removing demo timer clearInterval(timer); var pbar = $("#"+progressBarId); pbar.empty(); pbar.text("compete "+pbar.data('max')+"%").css({"color":"black", "background":"lightgreen", "text-align":"center"}); } // Demo // here is a demo of progress bar update and finilize $(function() { multimize("progressbar", ["#06AF8F","#000000","#F94443"], 200); }); var classA=0, classB=0, classC=0; var timer = setInterval(function(){ classA += (Math.round(Math.random() * (20 - 2) + 2))/30; classB += (Math.round(Math.random() * (20 - 1) + 1))/15; if (classC<20) classB = Math.min(classB, 15); classC += (Math.round(Math.random() * (20 - 7) + 7))/60; classC = Math.min(classC, 40); multiUpdate("progressbar", [classA,classB,classC]); }, 100); 

 <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <div id="page"> <div id = "progressbar"></div> </div> 

Answer 2

Here is the way you can complete the first part of the question.

Working example: http://jsfiddle.net/Twisty/03yuc3un/

HTML

 <div id="progressbar"></div> <div class="form"> Add Funds: <input type="" id="funds" /> <button id="addBtn">Add</button> </div> 

CSS

 .form { padding: 20px; } .ui-progressbar-value { float: left; text-align: center; padding-top: .25em; } .form input { width: 4em; } #progressbar div.ui-progressbar-value.ui-widget-header:first-of-type { z-index: -1; display: none; } .color-1 { background: #FF0000; } .color-2 { background: #FFA500; } .color-3 { background: #FFFF00; } .color-4 { background: #00FF00; } .color-5 { background: #0000FF; } .color-6 { background: #FF00FF; } 

JQuery

 $(function() { var $pgbr = $("#progressbar").progressbar({ value: 0, max: 100, change: function(e, ui) { $(this).find(".ui-progressbar-value").eq(0).css("display", "none"); } }); $("#addBtn").button().click(function(e) { var funds = parseInt($("#funds").val()); var cValue = $pgbr.progressbar("value"); var sum = cValue + funds; if (sum > $pgbr.progressbar("option", "max")) { return false; } $pgbr.progressbar("value", sum); if (funds) { var $chunk = $("<div>", { class: "ui-progressbar-value ui-widget-header", width: ((funds / $pgbr.progressbar("option", "max")) * 100) + "%" }); var count = $("#progressbar .ui-progressbar-value").length; if (count == 0) { $chunk.addClass("ui-corner-left"); } if (count <= 6) { $chunk.addClass("color-" + count); } else { $chunk.addClass("color-" + count % 6); } $chunk.html(funds); $pgbr.append($chunk); } }); }); 

As you can see, there is no way to make partitions naturally using progressbar() . This example allows us to add amounts to the progress bar. If the target is 100 or 2000, this can be set to max during initialization. This example assumes that you are adding money collected per day to the goal. Examples of tests: 30 US dollars per day 1, 10 US dollars per day 2, 20 US dollars on the 3rd day.

When adding funds, one more div added with the width set in percentage. This will help to correctly evaluate the value of the goal. If the target is $ 100, the width will be 30%. If the target is $ 2000, the width will be 1.5%.

Using CSS, you can assign specific colors. I selected 6 colors and rotated them according to the number of sections already added. You can do this in several ways.

Now let's say that your stretch goal is $ 5000, and your minimum goal is $ 2000, initially it could be max of 2000 . If the amount collected exceeds $ 2000 ... there is a little logistical problem. You can iterate over each section and resize it to the appropriate percentage. Personally, I believe that it is best to reduce the width of the progress bar itself and create a second progress bar that can track the surplus.

Feel free to comment questions.

Answer 3

Here's a pure Javascript solution.

This is a function that receives segments as an array of numbers, just like a number, a CSS selector for the container (string) and optionally an array of colors (like string).

Segments and sums are numbers, not percentages. The function converts segments to percent and draws a bar.

For your use case, if you have an overflow, just add the 4th segment, which is the calculated overflow (out of the total), with a different color (example 2).

You can style segment borders using CSS to make the overflow visually different.

 function progress_bar(segments, total, selector, colors) { //if no colors default to these 3 colors colors = colors || 'green black red'.split(' '); //find the container DOM element var bar = document.querySelector(selector); for (var i = 0; i < segments.length; i++) { child = document.createElement('DIV'); //compute width in percents relative to total var relativeW = total ? segments[i] / total * 100 : 0; child.innerHTML = Math.floor(relativeW); child.className = 'bar-segment bar-segment--' + (i + 1); child.style = 'float:left; height:100%; background: ' + colors[i] + '; width: ' + relativeW + '%;'; bar.appendChild(child); } } progress_bar([20, 50, 10], 100, '.progress-demo'); progress_bar([40, 100, 20, 30], 200, '.progress-demo-2', ['green','black','red', 'yellow']); 

 .bar-segment{ text-align:center; overflow:hidden; } .bar-segment--2{ color:white; } 

 <h4>1.</h4> <div class="progress-demo" style="height:20px; width:300px; border: 1px solid gray"> </div> <h4>2.</h4> <div class="progress-demo-2" style="height:20px; width:300px; border: 1px solid gray"> </div> 

Answer 4

Many people use the jQuery interface due to the success of the jQuery brand, even when jQuery and the jQuery user interface are two completely different products. Although jQuery is great, jQuery UI tends to have a lot of rough edges. Bootstrap also spans execution bars and is usually easier to extend and customize. See this example on the Bootstrap execution line, for example .

If you decide to stick with the jQuery user interface, you can extend $.ui.progressbar and use it like:

 pb = $( "#progressbar" ).progressbar({ values: [30,10,20] }); 

 $.widget("custom.progressbar", $.ui.progressbar, { _create: function() { // Constrain initial value this.oldValue = this.options.value = this._constrainedValue(); this.element.attr( { role: "progressbar", "aria-valuemin": this.min } ); this._addClass( "ui-progressbar", "ui-widget ui-widget-content" ); val_bar = $( "<div><span class='progress-label'></span></div>" ).addClass("ui-progressbar-value ui-widget-header"); var bar_sections = this.options.values; for (i in bar_sections) { var bar_section = val_bar.clone(); this.element.append(bar_section.addClass('bar_' + i)); } this.valueDivs = this.element.find('.ui-progressbar-value'); this._refreshValue(); }, _refreshValue: function() { var values = this.options.values, percentage = this._percentage(), _total = this.options.values.reduce(function(a, b) {return a + b;}, 0) if (_total > 100) { this.options.max = _total; } else { this.options.max = 100; } for (index = 0; index < values.length; ++index) { this.options.value = values[index]; this.valueDiv = this.valueDivs.eq(index); $('.progress-label', this.valueDiv).text(values[index] + '%') this._super(); this.valueDiv .width( percentage + "%" ); } }, _values: function( newValues ) { this.options.values = newValues; this._refreshValue(); } }); initial_values = [30,10,20] var pb = $( "#progressbar" ).progressbar({ values: [30,10,20] }); function progress(pb) { // var val = pb.progressbar("value") || 0; initial_values.map(function(x, i, ar){ if (initial_values[i] < 100) { initial_values[i] = initial_values[i] + 1; } }); $( "#progressbar" ).progressbar({ values: initial_values }); setTimeout(progress, 100); } progress(pb); 

  body{ font-family: "Trebuchet MS", sans-serif; margin: 50px; } .demoHeaders { margin-top: 2em; } #dialog-link { padding: .4em 1em .4em 20px; text-decoration: none; position: relative; } #dialog-link span.ui-icon { margin: 0 5px 0 0; position: absolute; left: .2em; top: 50%; margin-top: -8px; } #icons { margin: 0; padding: 0; } #icons li { margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none; } #icons span.ui-icon { float: left; margin: 0 4px; } .fakewindowcontain .ui-widget-overlay { position: absolute; } select { width: 200px; } #progressbar { white-space: nowrap; overflow:hidden; border: 1px solid #dddddd; } html .ui-progressbar-value { display: inline-block; } .bar_0 { background: #06af8f; } .bar_1 { background: #000; } .bar_2 { background: #fc4242; } .progress-label { display: block; height: 100%; line-height: 30px; vertical-align: middle; text-align: center; } .bar_1 .progress-label { color: #fff; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> <div id="progressbar"></div> 

Answer 5

I think you might like multrogressbar.js

CSS

 #styled{ margin: 30px; width: 50%; font-size: 1em; } .green {background: green} .black {background: black} .red {background: red} 

HTML

 <div id="styled"></div> 

JQuery

 $('#styled').multiprogressbar({ parts:[{value: 30, text: true, barClass: "green", textClass: "whiteText"}, {value: 10, text: true, barClass: "black", textClass: "whiteText"}, {value: 20, text: true, barClass: "red", textClass: "whiteText"}] }); 

---

Result

JsFiddle Demo

Answer 6

You can implement many progress indicators using simple html and css. No plugin needed

 <div class="container"> <h2>Stacked Progress Bars</h2> <p>Create a stacked progress bar by placing multiple bars into the same div with class .progress:</p> <div class="progress"> <div class="progress-bar progress-bar-40" role="progressbar"> 40% </div> <div class="progress-bar progress-bar-10" role="progressbar"> 10% </div> <div class="progress-bar progress-bar-20" role="progressbar"> 20% </div> </div> </div> <style> .progress { height: 20px; overflow: hidden; background-color: #f5f5f5; border-radius: 4px; -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1); box-shadow: inset 0 1px 2px rgba(0,0,0,.1); } .progress-bar { float: left; width: 0; height: 100%; color: #fff; font-size: 12px; text-align: center; line-height: 20px; background-color: #337ab7; -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); -webkit-transition: width .6s ease; -o-transition: width .6s ease; transition: width .6s ease; } .progress-bar-40 { width: 40%; background-color: #5cb85c; } .progress-bar-10 { width: 10%; background-color: #f0ad4e; } .progress-bar-20{ width: 20%; background-color: #d9534f; } </style> 

Check out this fiddle https://jsfiddle.net/zLxxmact/2/