35
تشکر

آموزش ساخت لودینگ با استفاده از css3

loading using css3

loading using css3


معمولا ساخت لودینگ با نرم افزار فلش برای کاربران عادی کار ساده ای نیست و باید وقت زیادی را صرف ساخت یک لودینگ ساده بکنند بنابر این تصمیم گرفتیم در این پست ساخت لودینگ با استفاده از css3 را آموزش دهیم.

قدم اول :

در قدم اول ما یک تگ دیو ایجاد خواهیم کرد و به آن یک کلاس اختصاص خواهیم داد با نام  (loadingdiv) و در داخل این دیو از 5 تگ  span استفاده خواهیم کرد به شکل زیر:

<div class="loadingdiv">
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
</div>

قدم دوم :

در قدم دوم ما به سراغ استایل نویسی کلاس (loadingdiv) که در قدم اول برای یک دیو تعریف کردیم خواهیم رفت به شکل زیر کد های CSS خود را وارد کنید:

.loadingdiv span{
    display: inline-block;
    vertical-align: middle;
    width: 10px;
    height: 10px;
    margin: 50px auto;
    background: #174C4F;
    border-radius: 5px;
    -webkit-animation: loading 0.9s infinite alternate;
    -moz-animation: loading 0.9s infinite alternate;
    box-shadow:1px 1px 1px #444444;
}

قدم سوم :

در قدم سوم ما به تغییر رنگ و تاخیر انیمیشن هر یک از Span ها خواهیم پرداخت به صورت زیر کد هاتون رو به استایلتون اضافه کنید :

.loadingdiv span:nth-of-type(2) {
    background: #999;
    -webkit-animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
}
.loadingdiv span:nth-of-type(3) {
    background: #666;
    -webkit-animation-delay: 0.4s;
    -moz-animation-delay: 0.4s;
}
.loadingdiv span:nth-of-type(4) {
    background: #333;
    -webkit-animation-delay: 0.6s;
    -moz-animation-delay: 0.6s;
}
.loadingdiv span:nth-of-type(5) {
    background: #000;
    -webkit-animation-delay: 0.8s;
    -moz-animation-delay: 0.8s;
}

قدم چهارم :

در این قدم به تعریف انیمیشن با استفاده از css3 و تبدیل فریم کلیدی خواهیم پرداخت :

@-webkit-keyframes loading {
    0% {
        width: 10px;
        height: 10px;
        -webkit-transform: translateZ(0);
    }
    100% {
        width: 24px;
        height: 24px;
        -webkit-transform: translateZ(-21px);
    }
}
@-moz-keyframes loading {
    0% {
        width: 10px;
        height: 10px;
        -moz-transform: translateZ(0);
    }
    100% {
        width: 24px;
        height: 24px;
        -moz-transform: translateZ(-21px);
    }
}

» کاربران محترم در صورت بروز سوال یا مشکل در قسمت نظرات سوالات خود را مطرح فرمائید.
موفق باشید.

جاوید خانلو

جاوید محمدخانلو هستم دانشجوی کارشناسی رشته نرم افزار ، در حال حاظر تو قزوین زندگی میکنم و تو زمینه های PHP,HTML,CSS,JQUERY,AJAX,,MYSQL,WordPress,C++,C,VB,NETWORK, فعالیت میکنم.

  • qqqamir می‌گه:

    ببخشید من ی سوال دارم ..الان ما این لودینگ هارو ساختیم ..ولی چطوری اون هارو با بارگذاری وب هماهنگ کنیم …منظورم اینه که چطوری وقتی بار گذاری تموم شد این لودینگ هم از بین بره

    • آروین می‌گه:

      سلام
      میتونید از رویداد window.onload() استفاده کنید که وقتی اجرا میشه که بارگذاری صفحه تموم شده.

  • نیما می‌گه:

    سایت خوبیه ولی دمو اصلا نمیزارین ؟؟

  • Aref Taker می‌گه:

    اگه درباره ی کاربرد هر کدوم از کدها توضیح میدادید
    خیلی بهتر بود.
    آخه وبسایت آموزشی هست دیگه.

  • جاوید خانلو می‌گه:

    بله چشم ایشالا به زودی دمو رو هم ضمیمه میکنم.

  • mgh می‌گه:

    جالب بود اگر دمو هم می داشت
    خوب پرفکت می شد


  • نظرات این مطلب بسته است.