loading...

ابزارها قالب

ایجاد نوار بارگذاری به صورت فول css و بدون استفاده از تصاویر سنگین و پر حجم و قابل استفاده در هر اندازه ای

تبلیغات
تبلیغات ارزان و پربازدهتبلیغات ارزان و پربازده
آخرین ارسال های انجمن
حمیدرضا بازدید : 2513 یکشنبه 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 بیشتر شد ، دیگر حلقه به پایان برسد.

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

نام
ایمیل (منتشر نمی‌شود)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B :S
کد امنیتی
رفرش
کد امنیتی
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
ابزارهای خاص
جعبه ی پیوند لینک کوتاه کن رایگان ارزیابی آنلاین سایت و وبلاگ به صورت رایگان
تبلیغات
تبلیغات ارزان و پربازدهتبلیغات ارزان و پربازده
تبلیغات متنی
درباره ما
لوگوی ابزارها قالب
سایت ابزارها قالب برای خاص بودن آفریده شده است. به امید این که خاص ترین باشیم.
اطلاعات کاربری
  • فراموشی رمز عبور؟
  • تبلیغات
    تبلیغات ارزان و پربازدهتبلیغات ارزان و پربازده

    آمار سایت
  • کل مطالب : 215
  • کل نظرات : 269
  • افراد آنلاین : 1
  • تعداد اعضا : 3195
  • آی پی امروز : 30
  • آی پی دیروز : 94
  • بازدید امروز : 245
  • باردید دیروز : 191
  • گوگل امروز : 3
  • گوگل دیروز : 9
  • بازدید هفته : 1,036
  • بازدید ماه : 9,533
  • بازدید سال : 100,903
  • بازدید کلی : 1,787,338
  • کدهای اختصاصی
    یادبود 175 شهید غواص
    یادبود 175 شهید غواص