jQuery はパーセンテージスコアリングの進捗バーを実装します

(関数($){
 '厳密な使用';
 
 $.fn.LineProgressbar = function(オプション){

  var オプション = $.extend({
   パーセンテージ: null、
   進行状況カウントを表示: true、
   期間: 1000、

   // スタイルオプション
   塗りつぶし背景色: '#3498db',
   背景色: '#EEEEEE',
   半径: '0px',
   高さ: '10px'、
   幅: '100%'
  },オプション);

  this.each(function(index, el) { を返します
   // マークアップ
   $(el).html('<div class="progressbar"><div class="proggress"></div></div><div class="percentCount"></div>');
   


   var progressFill = $(el).find('.proggress');
   var progressBar = $(el).find('.progressbar');


   progressFill.css({
    背景色: options.fillBackgroundColor、
    高さ: オプション.高さ、
    境界半径: options.radius
   });
   プログレスバー.css({
    幅: オプション.width、
    背景色: options.backgroundColor、
    境界半径: options.radius
   });

   // 進行中
   進捗状況の塗りつぶしをアニメーション化します(
    {
     幅: options.percentage + "%"
    },
    { 
     ステップ: 関数(x) {
      if (options.ShowProgressCount) {
       $(el).find(".percentCount").text("("+Math.round(x) + "分"+")");
      }
     },
     期間: オプション.期間
    }
   );
  });
 }
})(jQuery);

#プログレスバー1{
 ディスプレイ: フレックス;
 高さ: 15px;
}
.プログレスバー{
    幅: 50%;
 上マージン: 5px;
 位置: 相対的;
 背景: #182746 !重要;
 境界線の半径: 6px !重要;
 ボックスシャドウ: インセット 0px 1px 1px rgba(0,0,0,.1);
}

.進捗状況{
 高さ: 8px;
 幅: 10px;
 背景: linear-gradient(右へ、rgb(13, 93, 176), rgb(32, 177, 223)) !important;
 境界線の半径: 6px !重要;
}

.パーセントカウント{
 空白: ラップなし;
 左マージン: 10px;
 フォントサイズ: 14px;
}