آموزش ساخت Loader در CSS

ساعت : ۱۴:۲۳

تاریخ : ۱۷ آذر ۱۳۹۷

چطور به کمک CSS یک Loader طراحی کنیم؟

برای طراحی لودر به کمک CSS نیازمند کمی خلاقیت هستیم. با ما همراه باشید تا مراحل طراحی لودر را باهم بررسی کنیم.

  • طراحی ظاهر لودر به کمک HTML و CSS

    در این مرحله به کمک HTML و CSS ظاهر لودر را طراحی میکنیم.

    برای طراحی ظاهر لودر خود باید از کدهای HTML و CSS کمک بگیریم. کدهای روبه رو که مشاهده میکنید ، کدهای HTML و CSS لودر ماهستند

    اگر از کدهای HTML و CSS مقابل استفاده کنید ظاهر لودر سایت شما به صورت زیر ظاهر خواهد شد :

    در این مرحله کار ما به پایان رسیده و ظاهر لودر را به کمک HTML و CSS طراحی کردیم. حال نوبت به این رسیده است که این لودر را به کمک CSS به حرکت درآوریم و برای آن یک انیمیشن و سناریو حرکت طراحی کنیم.

    کدهای CSS : #loader {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    margin: -75px 0 0 -75px;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    }
    کدهای HTML : <div id="loader"> </div>
  • طراحی انیمیشن لودر به کمک CSS

    در مرحله قبل به کمک HTML و CSS ظاهر لودر را طراحی کردیم حال به کمک CSS لودر را به حرکت در می آوریم.

    برای طراحی انیمیشن در CSS باید کدهای مقابل را به کدهای CSS لودر اضافه کنیم.

    پس از اضافه کردن کدهای CSS که مربوط به انیمیشن هستند خروجی ما به صورت زیر خواهد شد :

    کدهای CSS : #loader {
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    }
    @-webkit-keyframes spin {
    ۰% { -webkit-transform: rotate(0deg); }
    ۱۰۰% { -webkit-transform: rotate(360deg); }
    }
    @keyframes spin {
    ۰% { transform: rotate(0deg); }
    ۱۰۰% { transform: rotate(360deg); }
    }



  • آموزش ساخت Loader در CSS
    نام نویسنده : امیرمسعود طالاری
  • آموزش ساخت Loader در CSS
    نام نویسنده : رضا ابولحسن زاده
  • آموزش ساخت Loader در CSS
    نام نویسنده : رضا ابولحسن زاده
  • آموزش ساخت Loader در CSS
    نام نویسنده : رضا ابولحسن زاده

درباره نویسنده : برنامه نویس وب و کارشناسی ارشد رشته نرم افزار

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *