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.
Co znajdziesz w tym wpisie
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.