Jquery Progress Bar Plugin - NProgress

Anasayfa

Bu dersimizde jquerynin NProgress pluginini anlatacağım.Bu plugin youtube deki site üst kısmındaki gibi bir progress bar yapmamızı sağlıyor.Şimdi kodlarımıza başlayalım.

İndir : http://ustaderslik.com/dosya/nprogress.rar

Öncelikle sayfaya jquery ile plugin dosyalarını dahil ediyoruz.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

	<script type="text/javascript" src="nprogress.js"></script>

	<link rel="stylesheet" href="nprogress.css" />

Dosyaları örneği indirerek alabilirsiniz.

Şimdi plugin kodlarımıza bakalım.

NProgress.start() //Yüklemeyi başlatır.otomatik ilerler

NProgress.done()//yüklemeyi bitirir.

NProgress.set(0.5)//Yüklemeyi elle kontrol etmemizi sağlar.0-1 arası değer alırı.

Genel örnek :

<!DOCTYPE HTML>

<html lang="en-US">

<head>

	<meta charset="UTF-8">

	<title>UstaDerslik</title>

	<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

	<script type="text/javascript" src="nprogress.js"></script>

	<link rel="stylesheet" href="nprogress.css" />

	<script type="text/javascript">

		$(function(){

			

			var yuklenen=0;

			

			$("button").click(function(){

					  yuklenen=0;

				var yenile=setInterval(function(){ yukle(); },300);

			})

		

			function yukle(){

				if(yuklenen<100){

					yuklenen+=10;

				}else{

					clearInterval(yenile)

				}

				NProgress.set(yuklenen/100);

			}

			

		})

	</script>

</head>

<body>

	

	<button>Yükle</button>

	

</body>

</html>

Görüntüsü :

http://ustaderslik.com/resim/ders/7yh4hh87h.png

Butona basarsak sitenin en üstünde yükleme başlıyor ve bitiyor.

Örnekte ne yaptık ona bakalım.Sürekli bir foksiyonu çalıştırarak yuklenen değişkeni 100 oluncaya kadar 10 ar 10ar artırdık.daha sonra o değişkenin içeriğini progress bar ile gösterdik.

Çubuk tasarımı için nprogress.css den #nprogress .bar ı bulun değişiklikler yapabilirsiniz.

Jquery Progress Bar Plugin - NProgress

Tüm Hakları Saklıdır. ©Arleone 2013-UstaDerslik