post_ico1

Pasek ładowania z minimalną ilością kodu CSS i jQuery

Czym jest pasek ładowania nie muszę chyba tłumaczyć :). Jest to bardzo przydatne narzędzie, gdy wczytujemy większą ilość danych co zabiera trochę czasu – dzięki temu użytkownik wie, że „coś” się dzieje. Pokażę tobie jak stworzyć taki pasek za pomocą dwóch klas CSS oraz jednej funkcji jQuery

Na początek stwórzmy szkielet dokumentu HTML:

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Loading...</title>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<body>
<div class="bar"><div class="fill"></div></div><span class="message"></span>
</body>
</html>

Zwróć uwagę na sekcję body. Są tam 3 kontenery. Div o klasie bar jest kontenerem paska, wewnątrz mamy jeszcze blok z klasą fill, który będzie zawierać wypełnienie tworzonego paska. Dodatkowo dodałem span z klasą message do wyświetlenia komunikatu użytkownikowi.

Ok mamy już HTML, pora na CSS…

<style>
    .bar{
        background: #e4e4e4;
        border-radius: 10px;
        height: 24px;
        width:200px;
        display: inline-block;
        vertical-align: middle;
    }
    .fill{
        background: #ff0000;
        height: 24px;
        width:0%;
        border-radius: 10px;
    }
    .message{
        display: none;
        padding-left: 15px;
    }
</style>

Klasa bar jest głównym kontenerem paska ładowania. Ustawiam tam wymiary – szerokość i wysokość, tło itp. Oczywiście możesz go dowolnie upiększyć. Klasa fill zawiera z kolei wypełnienie – tutaj są istotne dwie rzeczy: na początek width musi wynosić 0%, a height musi być taki sam jak wysokość kontenera bar. W moim pasku wypełnienie będzie czerwone.

No to jeszcze brakuje nam kilku linijek JavaScript:

<script>
    $(document).ready(function() {
        $( ".fill" ).animate({
            width: "100%"
        }, 5000, function() {
            $(".message").html("Sukes");
            $(".message").fadeIn("slow").css("display", "inline-block");
        });
    })
</script>

I o to cała filozofia :). Mając wypełnienie wewnątrz paska ładowania po prostu zwiększam width aż osiągnie 100%. Do tego świetnie nadaje się funkcja animate w jQuery. Na koniec wyświetlam komunikat o sukcesie.

Jak pasek ładowania wygląda w praktyce możesz zobaczyć w demie.

Co sądzisz o wpisie?
BeżnadziejnySłabyŚredniDobryBardzo dobry (1 głosów, średnia ocen: 5,00 z 5)
Loading...
  • wdx

    Literówka w demie „Sukes”

  • Tylko po co „taki” pasek?

    • Można go wyświetlić np. przy wczytywaniu pliku AJAXem albo podczas wczytywania jakiegoś elementu strony.