آموزش توسعه‌ی Loading Spinner با استفاده از CSS


۲۴ فروردین ۱۴۰۰
آموزش توسعه‌ی loading spinner با استفاده از css

در این مقاله تصمیم داریم تا با استفاده از CSS یک Loading Spinner ایجاد کنیم و بدون فوت وقت به‌سراغ قدم اول این آموزش می‌رویم.

قدم اول

در این مرحله می‌خواهیم ساختار Spinner مورد نظرمان را پیاده‌سازی کنیم بنابراین در فایل index.html خود یک div قرار دهید و به آن یک class با نام spinner بدهید:

<div class = "spinner"></div>

پس از این کار بایستی class فوق را در فایل index.css تعریف کنیم:

body {
    bodybackground: #050115;
}

.spinner {
    width: 10em;
    height: 10em;
    border-top: 1em solid #d5fff7;
    border-right: 1em solid transparent;
    border-radius: 50%;
}

قدم دوم

پس از ایجاد ساختار کلی Spinner یک div دیگر به درون آن اضافه می‌کنیم و یک class با نام head به آن اختصاص می‌دهیم:

<div class="spinner">
    <div class="head"></div>
</div>

در مرحله‌ی بعد بایستی head را در کدهای CSS خود تعریف کرده و موقعیت آن را تعریف کنیم:

.head {
    width: 1em;
    height: 1em;
    background-color: #d5fff7;
    border-radius: 50%;
    margin-left: 8.5em;
    margin-top: 0.5em;
}

قدم سوم

در این بخش تصمیم داریم تا Spinner خود را در وسط صفحه قرار دهیم تا توجه کاربران را به‌خود جلب کند بنابراین در کدهای CSS مقدار margin: auto; را به spinner اضافه می‌کنیم:

.spinner {
    width: 10em;
    height: 10em;
    border-top: 1em solid #d5fff7;
    border-right: 1em solid transparent;
    border-radius: 50%;
    margin: auto;
}

پس از این کار متوجه می‌شوید که Spinner فقط به‌صورت افقی در وسط صفحه قرار گرفته زیرا ارتفاع body به‌اندازه‌ی کل صفحه نیست. راه حل به‌صورت زیر است:

body {
    background: #050115;
    display: flex;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

قدم چهارم

برای چرخش Spinner باید از animation استفاده کنیم که تعریف آن به‌شکل زیر است:

.spinner {
    width: 10em;
    height: 10em;
    border-top: 1em solid #d5fff7;
    border-right: 1em solid transparent;
    border-radius: 50%;
    margin: auto;
    animation: spinner 0.6s linear infinite;
}

در animation برای animation-name از spinner استفاده کردیم که شما می‌توانید از هر نام دلخواه دیگری استفاده کنید. مقدار 0.6s مدت زمانی است که animation ما از ۰ درصد به ۱۰۰ درصد می‌رسد. linear به ما کمک می‌کند تا اجرای animation روان باشد و در نهایت مقدار infinite وجود دارد که با توجه به معنای می‌توانیم متوجه شویم که animation ما به تعداد بی‌نهایت بار تکرار می‌شود.

بیایید animation مورد نظرمان که در مرحله‌ی قبل نام آن را spinner گذشته بودیم، تعریف کنیم:

@keyframes spinner {
    100% {
        transform: rotate(360deg)
    }
}

قدم پنجم

در این بخش می‌خواهیم به شما بگوییم که چگونه می‌توانید اندازه‌ی Spinner را تغییر دهید. این کار بسیار ساده است و فقط نیاز داریم تا font-size را به‌عنوان یک inline-style به Spinner خود بدهیم:

<div class="spinner" style="font-size: 10px">
    <div class="head"></div>
</div>

مقدار پیش‌فرض 16px یا 1rem است بنابراین برای مشاهده‌ی تغییرها بایستی مقدار متفاوتی به font-size بدهید.

منبع: https://designingcoder.hashnode.dev/creating-a-simple-head-tail-loading-spinner-using-vanilla-css

برچسب‌ها:

خدمات رایگان لیارا

۲.۵ گیگابایت فضای ذخیره‌سازی ابری رایگان

۲.۵ گیگابایت Object Storage سازگار با پروتکل S3 با دیسک‌های SSD به‌صورت رایگان دریافت کنید.

هاست رایگان برای دیتابیس‌

دیتابیس‌های MariaDB، PostgreSQL و Redis را فقط با یک کلیک و به‌صورت رایگان تهیه کنید.

سرویس DNS رایگان

به سادگی دامنه‌تان را اضافه کنید و به صورت رایگان رکورد‌های آن را مدیریت کنید.

۱۰۰ هزار تومان اعتبار اولیه

بعد از ثبت نام در لیارا مبلغ ۱۰۰ هزار تومان اعتبار هدیه دریافت می‌کنید که با توجه به ساعتی بودن هزینه سرویس‌ها، می‌توانید تمامی خدمات پولی را برای چندین هفته رایگان استفاده کنید.

ارسال ۱۰۰ ایمیل تراکنشی رایگان در هر ماه

در سرویس ایمیل لیارا شما می‌توانید تا ۱۰۰ ایمیل رایگان در هر ماه ارسال کنید و فقط برای بیش از آن هزینه پرداخت کنید. (به‌همراه دسترسی SMTP)

هاست رایگان برای انواع وبسایت

تفاوتی ندارد برای وبسایت خود از Node استفاده می‌کنید یا Laravel و Django، در لیارا می‌توانید به صورت کاملا رایگان آن را میزبانی کنید.

توسعه‌دهندگان درباره‌ی ما چه می‌گویند

تجربه کار باliara_cloud@امروز خیلی خوب بود. یکی از سرویس هام رو منتقل کردم روش و راضیم. انقد سریع و جذاب کارم راه افتادم اصن باورم نمیشد! برعکس سرویس های PaaS دیگه با اون همه پیچیدگیشون. دمتون گرم
...

MohammadReza
liara testimonial
keikaavousi

بعد از بسته شدن @fandoghpaas و ناراحتی همه‌مون از اینکه یه سرویس خوب و صادق نمی‌تونه از پس هزینه‌ها بر بیاد، سرویسم رو منتقل کردم به پاس لیارا (https://liara.ir @liara_cloud) . تجربه راحت و خوب. تفاوت‌هایی داشت که کمی کار می‌خواست ولی تا الان کاملا راضی.

jadi
liara testimonial
jadi

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

Arch
liara testimonial
EbadiDev

واسه سرویس PaaS با اختلاف لیارا بهترین رابط کاربری داره و یکی از مزیت‌های سرویس دیتابیس‌شون اینه که خودشون به صورت دوره‌ای بکآپ میگیرن.
...

Ali Najafi
liara testimonial
me_ali_najafi

یکی از کارهای خوبی که جدیداً میکنم اینه که یه دیتابیس روی لیارا میسازم و به پروژه وصل میکنم اینطوری هم خونه و هم محل کار دیتابیس بروز رو دارم و راحت میتونم ادامه بدم کار روliara_cloud@

Navid
liara testimonial
1navid

عاشقliara_cloud@شدم درسته در حد AWS نیست ولی خب تجربه خوبی واسه پروژه های داخل ایران ارائه میده، میتونم رو CD هم اجراش کنم

Amir H Shekari
liara testimonial
vanenshi