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.
