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

          حمیدرضا 
            بازدید : 2778
          یکشنبه 10 خرداد 1394
           نظرات (0)
        

همان طور که از عنوان مطلب مشخص است ، این مطلب مربوط به ایجاد یک نوار بارگذاری (لودینگ) برای صفحه است. خیلی ها برای نمایش بارگذاری از تصاویر 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 بیشتر شد ، دیگر حلقه به پایان برسد.

ارسال نظر برای این مطلب

عنوان	پاسخ	بازدید	توسط
پنهان کردن عناصر صفحه در php	4	2560	snakeeye
طراحی باکس دانلود	6	2769	mary567
ارزیابی رایگان سایت ها و وبلاگ ها	25	9475	grimboy
انواع قالب اختصاصی	3	2313	ghraphic-home
بهترین افزونه های AMP وردپرس	2	2718	jack7788
کد پاپ اپ دو یا چند پنجره به طور همزمان پشت صفحه	23	9847	jack7788