jquery - プログレスバーのマルチセグメント?

Question

プログレスバーのjQueryプラグインでマルチセグメントを探しています。

各セグメントは、異なる幅と異なる背景色を持つことができます。

私はこのようなものを探しています:

ぐるぐる回るのに疲れました。マルチ セグメントのサポートをサポートする jquery プログレス バー プラグインが見つかりません。

そのプラグインは存在しますか？

Answer 1

jquery-ui を使用すると、.ui-progressbar-value 内にセグメントを作成できます

$( "#progressbar" ).progressbar({
  value: 0,
  create: function( event, ui ) {
      var progress=$(this);
      var progressvalue=progress.children(".ui-progressbar-value");
      progressvalue.css("overflow","hidden");
      var wrapper=$("<div>");
      wrapper.css({"width":progress.width(),"height":"100%","display":"block"});
      progressvalue.append(wrapper);         
      var segment=$("<span>");
      segment.css({"width":"20%","height":"100%","display":"block","background":"#aa0000","float":"left"});
      wrapper.append(segment);
      segment=$("<span>");
     segment.css({"width":"50%","height":"100%","display":"block","background":"#00aa00","float":"left"});
      wrapper.append(segment);
  }
});    

http://jsfiddle.net/9fDy3/