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