jQuery implementiert einen prozentualen Fortschrittsbalken

(Funktion($){
 „streng verwenden“;
 
 $.fn.LineProgressbar = Funktion(Optionen){

  var Optionen = $.extend({
   Prozentsatz: null,
   ShowProgressCount: wahr,
   Dauer: 1000,

   // Styling-Optionen
   Füllhintergrundfarbe: '#3498db',
   Hintergrundfarbe: '#EEEEEE',
   Radius: '0px',
   Höhe: '10px',
   Breite: '100%'
  },Optionen);

  gib dies zurück.jedes(Funktion(Index, el) {
   // Auszeichnung
   $(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({
    Hintergrundfarbe: Optionen.Hintergrundfarbe füllen,
    Höhe: Optionen.Höhe,
    borderRadius: Optionen.Radius
   });
   progressBar.css({
    Breite: Optionen.Breite,
    Hintergrundfarbe: Optionen.Hintergrundfarbe,
    borderRadius: Optionen.Radius
   });

   // Fortschritte
   progressFill.animate(
    {
     Breite: Optionen.Prozentsatz + "%"
    },
    { 
     Schritt: Funktion(x) {
      if (Optionen.ShowProgressCount) {
       $(el).find(".percentCount").text("("+Math.round(x) + "分"+")");
      }
     },
     Dauer: Optionen.Dauer
    }
   );
  });
 }
})(jQuery);

#progressbar1{
 Anzeige: Flex;
 Höhe: 15px;
}
.Fortschrittsbalken {
    Breite: 50%;
 Rand oben: 5px;
 Position: relativ;
 Hintergrund: #182746 !wichtig;
 Rahmenradius: 6px !wichtig;
 Box-Schatten: Einschub 0px 1px 1px rgba(0,0,0,.1);
}

.Fortschritt{
 Höhe: 8px;
 Breite: 10px;
 Hintergrund: linearer Farbverlauf (nach rechts, RGB (13, 93, 176), RGB (32, 177, 223)) !wichtig;
 Rahmenradius: 6px !wichtig;
}

.ProzentAnzahl{
 Leerzeichen: Nowrap;
 Rand links: 10px;
 Schriftgröße: 14px;
}