Dynamicznie ładujący się progress bar [Bootstrap]

Dziś pokażę wam jak zbudować prosty dynamicznie ładujący się pasek postępu czyli z angielskiego dynamic progress bar. W celu przyspieszenia mojej pracy do stworzenia animacji wykorzystam jeden z pasków ładowania z biblioteki Bootstrap 3+. Wy jednak możecie użyć innego paska. Pamiętajcie jednak by odpowiednio zmodyfikować kod jQuery tak by nazwy klas i id odpowiadały temu na czym wy konkretnie pracujecie.

Budujemy prosty pasek postępu

Pasek na jakim dziś będę pracować możecie zobaczyć po niżej + jego struktura w języku HTML:

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" 
  style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Jak widać w tej chwili pasek jest w częściowo załadowany (dzięki czemu możemy zobaczyć jakie elementy wchodzą w jego skład). By dalej na nim pracować muszę go teraz „opróżnić” czyli ustawić poziom załadowania na 0. W tym celu zmienię width:100% na width:0%. Spowoduje to, że mój pasek będzie pusty.

Dodawanie efektu ładowania

Sam efekt ładowania jest bardzo prosty do uzyskania w jquery. Choć przyznam, że na początku miałam z nim pewne problemy.

$(function() {
  var current_progress = 0;
  var interval = setInterval(function() {
      current_progress += 10;
      $("#dynamic")
      .css("width", current_progress + "%")
      .attr("aria-valuenow", current_progress)
      .text(current_progress + "% Complete");
  }, 1000);
 
});

Jak widać na początku dodałam zmienną current_progress i ustawiam ją na „0”. Następnym kroku zbudowałam funkcję matematyczną, która powoli będzie zwiększać szerokość paska.

Cała operacja zapełnienia się paska ma trwać 1000 (mikrosekund) o czym informuje nas liczna za liczącą funkcja. W tym czasie current_progress zostanie kilkakrotnie zwiększony o „10”.

current_progress += 10;

Następnie zmiana ta zostanie naniesiona na obiekt dysponujący id=”dynamic”. Zmiany to:

Zwiększenie szerokości o wartość current_progress + „%” – taka kombinacja zmienia np. 10 w 10%, 30 w 30%. Takie małe oszustwo 🙂

.css("width", current_progress + "%")

Z pomocą tej funkcji zmodyfikowana zostanie wartość aria-valuenow

.attr("aria-valuenow", current_progress)

Ostatni element doda mi z kolei tekst. A konkretnie informację w którym obecnie momencie znajduje się mój pasek.

.text(current_progress + "% Complete");

Dodanie efektu zmiany koloru paska podczas ładowania

Kolor paska może ulegać zmianie w zależności do miejsca w którym aktualnie się znajduje np:

$(function() {
  var current_progress = 0;
  var interval = setInterval(function() {
      current_progress += 10;
      $("#dynamic")
      .css("width", current_progress + "%")
      .attr("aria-valuenow", current_progress)
      .text(current_progress + "% Complete");
     if (current_progress == 20){
        $("#dynamic").css('background-color', 'orange');
     }
    if (current_progress == 50){
        $("#dynamic").css('background-color', 'pink');
     }
    if (current_progress == 70){
        $("#dynamic").css('background-color', 'red');
     }
      if (current_progress >= 100){
        $("#dynamic").css('background-color', 'blue');
          clearInterval(interval); }
  }, 1000);
 
});

Gotowy Pasek w działaniu:

See the Pen
Bootstrap progres bar by Aura (@Julka85)
on CodePen.