Jquery Simple Progress Loader Flat Style

Di sini saya akan share salah satu karya saya, walaupun sederhana namun barangkali bisa bermanfaat bagi teman teman di sini saya akan share tentang Jquery simple progress loader bertemakan flat style , Langkah untuk membuat nya sederhana script script inti dari Fungsi ini hanyalah potongan javascript sederhana yaitu seperti di bawah ini : 



Penjelasan :

maksud dari

$( "#runbutton-two" ).click(function(){}

#runbutton-two adalah id div element yang menjadi tombol untuk menjalankan loader

$(document).ready(function(){}

Ini artinya saat dokumen di load , loader akan berjalan secara otomatis

disini saya akan memberikan salah satu div yang saya jadikan sebagai loadernya

<br />
<div class="skill-box">
<div class="skill-title">
<center>
SKILLS</center>
</div>
<div class="skill-desc-first">
Web development</div>
<div class="grey-bar">
<div class="progress prog-wdev-two">
</div>
</div>
<div class="skill-desc">
Web Design</div>
<div class="grey-bar">
<div class="progress prog-wd-two">
</div>
</div>
<div class="skill-desc">
Graphic Design</div>
<div class="grey-bar">
<div class="progress prog-gd-two">
</div>
</div>
<div class="runbutton" id="runbutton-two">
RUN IT!</div>
</div>

Penjelasan :

potongan script diatas adalah script untuk menjalankan loader secara manual , jadi saat div ber-id

runbutton-two

di klik maka

$( "#runbutton-two" ).click(function(){)}

akan berjalan dan akan menjalankan

$(".prog-wdev-two").animate({"width": "80%"}, 5000);

yang berarti div ber-class

prog-wdev-to

akan di jalankan/animasikan menggunakan fungsi animate , fungsi animate sendiri adalah membuat animasi dari width 0% menjadi 80% , dan arti dari 5000 yaitu animasi akan berjalan selama 5000/1000 detik atau sama dengan 5 detik
untuk css inti dari loader ini adalah sebagai berikut

.skill-box {
	float: left;
	width: 360px;
	/*height: 250px;*/
	background-color: #fff;
	margin-left: 40px;
	margin-top: 20px;
	padding-bottom: 30px;
	overflow: auto;
}

.grey-bar{
	width: 340px;
	margin-left: 10px;
	background-color: #ebebeb;
	height: 5px;
	position: relative;
}

.progress {
	width: 0px;
	height: 5px;
	background-color: #1AB0D7;
	position: relative;
	z-index: 10;
}



.progress-red {
	width: 0px;
	height: 5px;
	background-color: red;
	position: relative;
	z-index: 10;
}

.progress-orange {
	width: 0px;
	height: 5px;
	background-color: orange;
	position: relative;
	z-index: 10;
}


.progress-green {
	width: 0px;
	height: 5px;
	background-color: green;
	position: relative;
	z-index: 10;
}


.skill-title {
	color: #afafaf;
	font-family: "ProximaNovaRegular", 'Helvetica Neue', Arial, Helvetica, sans-serif;
	font-size: 18px;
	margin: 0 auto;
	padding-top: 20px;
	/*padding-top: 15px;*/
	/*padding-bottom: 15px;*/
	padding-bottom: 30px;
}

.skill-desc {
	font-family: "ProximaNovaRegular", 'Helvetica Neue', Arial, Helvetica, sans-serif;
	font-size: 14px;
	margin: 0 auto;
	padding-top: 20px;
	padding-bottom: 10px;
	margin-left: 10px;
	color: #afafaf;
}

.skill-desc-first {
	font-family: "ProximaNovaRegular", 'Helvetica Neue', Arial, Helvetica, sans-serif;
	font-size: 14px;
	margin: 0 auto;
	padding-top: 0px;
	padding-bottom: 10px;
	margin-left: 10px;
	color: #afafaf;
}

.runbutton {
	color: white;
	font-family: "ProximaNovaRegular", 'Helvetica Neue', Arial, Helvetica, sans-serif;
	font-size: 16px;
	text-align: center;
	background-color: #1AB0D7;
	padding: 10px;
	margin: 0 auto;
	width: 100px;
	margin-top: 20px;
	border-radius: 3px;
	-moz-border-radius; 3px;
	cursor: pointer;
}

untuk lebih jelasnya teman teman bisa mendownload contoh yang saya berikan , beserta demo page nya secara free Klik tombol di bawah , ikuti langkahnya



Projek ini di buat oleh tim sevnteen sevn