آموزش ایجاد نوار بارگذاری با css و jquery

آموزش وب ، آموزشات فرعی ،
1349 بازدید
آموزش ایجاد نوار بارگذاری با css و jquery
ایجاد نوار بارگذاری به صورت فول css و بدون استفاده از تصاویر سنگین و پر حجم و قابل استفاده در هر اندازه ای

همان طور که از عنوان مطلب مشخص است ، این مطلب مربوط به ایجاد یک نوار بارگذاری (لودینگ) برای صفحه است. خیلی ها برای نمایش بارگذاری از تصاویر gif استفاده می کنند. اما اگر دقت کرده باشید ، خیلی از این تصاویر به موقع لود نمی شوند و نمی توانند فرایند بارگذاری را به خوبی نشان دهند. برای مثال در بسیاری از وبلاگ های رزبلاگ ، وقتی در فرم ورود کاربران ، روی ورود کلیک می کنید ، قبل از این که تصویر بارگذاری مربوط به ورود کاملا نمایش داده شود ، ورود انجام می شود و تصویر لودینگ عملا هیچ زیبایی ای ندارد.

ما در این مطلب قرار است بدون استفاده از تگ خاصی در html شیوه ای برای نوار بارگذاری ایجاد کنیم. اما بدانید که در html تگی به نام progress کار ایجاد نوار لودینگ را انجام می دهد ؛ اما این مطلب ربطی به آن ندارد.

برای ایجاد یک نوار لودینگ ما باید ابتدا در صفحه ی خود یک بلاک ایجاد کنیم. ما در اینجا از تگ div استفاده کرده ایم و قسمتی که پر می شود همان div داخلی است. یک تگ div هم با کلاس loading-percent ایجاد کرده ام مربوط است به درصد بارگذاری شده.

<<<code>>>

<div class="loading-percent"></div>

<div class="loading-block">

<div class="loaded"></div>

</div>

<<</code>>>

خروجی کد بالا

خب! حالا باید استایل ها را با استفاده از Css ایجاد کنیم. من در کد های زیر پس زمینه ی loading-block را خاکستری و رنگ قسمت بارگذاری شده را آبی قرار داده ام.

<<<code>>>

.loading-block{

background: #ddd;

height: 35px;

}

.loaded{

background: #39f;

height: 35px;

width: 20%;

}

.loading-percent{

position: absolute;

font: 1em comic sans ms;

margin: 0.35%;

}

<<</code>>>

اگر استایل بالا را بر روی کد های html خود اعمال کنید ، می بینید که مقدار بارگذاری شده 20% نمایش داده می شود. برای بهتر متوجه شدن این موضوع این دمو را ببینید:

دموی کد بالا

اما ما که نمی خواهیم همیشه یک مقدار ثابت نمایش داده شود. برای این که این مقدار تغییر کند باید از جاوا اسکریپت و جی کوئری استفاده کنیم.

کد های زیر مربوط به جاوا اسکریپت است:

<<<code>>>

<script type="text/javascript" src="http://www.toolstheme.ir/js/jquery.js"></script><!-- کتابخانه ی جی کوئری -->

<script language="javascript">

var LOADVAL=0;

$(document).ready( function(){ // رویداد مربوط به بارگذاری کامل صفحه

    var per = $('.loading-percent'), // انتخاب متن درصد

    loaded = $('.loaded'); // انتخاب قسمت آبی رنگ

    LOADVAL = 0; // صفر قرار دادن میزان لود شده

    var inter = setInterval( function(){

        LOADVAL++; // یک درصد افزایش

        if( LOADVAL > 100 ) LOADVAL = 0;

        loaded.css( 'width' , LOADVAL+'%' ); // تغییر طول قسمت آبی رنگ

        per.text( LOADVAL+'%' ); // تغییر مقدار نمایش درصد

    } , 50 );

} );

</script>

<<</code>>>

خروجی همه ی کد ها با هم - دمو ساز

قسمت قرمز رنگ: ما در این جا یک متغیر با نام LOADVAL معرفی کرده ایم تا مقدار درصد لود شده را در آن ذخیره کنیم.

قسمت آبی رنگ: در این قسمت ما یک حلقه ی تکرار ایجاد کرده ایم که برای همیشه تکرار را ادامه می دهد. در آرگومان اول این تابع یک تابع تعریف می شود و در آرگومان دوم مقدار وقفه ی میان انجام هر مرحله به میلی ثانیه مشخص می گردد.

قسمت صورتی رنگ: در این قسمت معلوم کرده ایم که اگر میزان بارگذاری شده از 100 بیشتر شد ، دوباره آن را صفر کند.

قسمت بنفش رنگ: در صورتی که شما می خواهید سرعت این بارگذاری کند شود باید این مقدار (50) را زیاد کنید و اگر می خواهید سرعت بارگذاری بیشتر شود باید آن را کم کنید.

شما اگر می خواهید میزان تغییر این درصد بارگذاری بر اساس انجام یک پروسه ای باشد ، می توانید با کار کردن روی کد های بالا به نتیجه برسید. البته مطمئن باشید وقت زیادی می برد.

یک ذره بیشتر:

اگر می خواهید بعد از انجام بارگذاری به طور کامل و رسیدن به 100% بارگذاری متوقف شود و دوباره از سر شروع نشود این کد را داخل if در تابع setInterval قرار دهید.

<<<code>>>

clearInterval( inter );

<<</code>>>

با استفاده از تابع بالا ، چرخه متوقف می شود. شما باید این تابع را درون قسمتی قرار دهید که هر وقت میزان درصد از 100 بیشتر شد ، دیگر حلقه به پایان برسد.

رمز تمام فایل های فشرده
رمز فایل فشرده است.