آموزش توسعهی 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
توسعهدهندگان دربارهی ما چه میگویند
تجربه کار باliara_cloud@امروز خیلی خوب بود. یکی از سرویس هام رو منتقل کردم روش و راضیم. انقد سریع و جذاب کارم راه افتادم اصن باورم نمیشد! برعکس سرویس های PaaS دیگه با اون همه پیچیدگیشون. دمتون گرم
...
MohammadReza
![liara testimonial]()
keikaavousi
بعد از بسته شدن @fandoghpaas و ناراحتی همهمون از اینکه یه سرویس خوب و صادق نمیتونه از پس هزینهها بر بیاد، سرویسم رو منتقل کردم به پاس لیارا (https://liara.ir @liara_cloud) . تجربه راحت و خوب. تفاوتهایی داشت که کمی کار میخواست ولی تا الان کاملا راضی.
jadi
![liara testimonial]()
jadi
با قدرت میتونم بگم تیم پشتیانی لیاراliara_cloud@یکی از بهترین تیمهای پشتیبانی که تا حالا دیدم. کارشون ارائه سرویسهای PaaS هست ولی من سوال در سطح برنامه خودمم(نه زیرساخت پلتفرم) که میپرسم بازم کامل و به موقع راهنمایی میکنن.
Amir
![liara testimonial]()
amirmazinani_ir
واسه سرویس PaaS با اختلاف لیارا بهترین رابط کاربری داره و یکی از مزیتهای سرویس دیتابیسشون اینه که خودشون به صورت دورهای بکآپ میگیرن.
...
Ali Najafi
![liara testimonial]()
me_ali_najafi
یکی از کارهای خوبی که جدیداً میکنم اینه که یه دیتابیس روی لیارا میسازم و به پروژه وصل میکنم اینطوری هم خونه و هم محل کار دیتابیس بروز رو دارم و راحت میتونم ادامه بدم کار روliara_cloud@
Navid
![liara testimonial]()
1navid
عاشقliara_cloud@شدم درسته در حد AWS نیست ولی خب تجربه خوبی واسه پروژه های داخل ایران ارائه میده، میتونم رو CD هم اجراش کنم
Amir H Shekari
![liara testimonial]()
vanenshi