آموزش ساخت loader ساده با CSS

اگر قصد دارید تا با ساده‌ترین دستورات ممکن در CSS یک loader ساده و جذاب برای سایت خودتان ایجاد کنید پس این محتوا برای شماست . ساختن المان‌های جذاب در نگاه اول شاید سخت باشد اما در این مقاله یکبار دیگر خدمت شما اثبات خواهیم کرد که می‌توانید با ساده‌ترین حالت نیز ، کارهایی جالب انجام دهید .

طراحی با CSS به خلاقیت نیاز دارد اما لازمه این خلاقیت ، آشنایی به نحوه کار هریک از دستورات CSS است . اگر طراح به درستی اطلاع داشته باشد که هر دستور با ترکیب دستور دیگر ، چه خروجی خواهد داشت ، می‌توانید تنها با چندخط کد ، مثال‌هایی همچون این loader را که در ادامه آموزش خواهیم داد ، طراحی کنید .

قدم اول ساخت loader ساده با CSS

برای ساخت یک loader ابتدا باید یک div ساده ایجاد کنیم و سپس عرض و ارتفاع لازم را به آن داده و نهایتا با ایجاد یک حاشیه صخیم و الحاق خمیدگی به میزان 50% آن را گرد کنیم .

سپس رنگ یکی از حاشیه ها را متفاوت کرده و به div اصلی یک انیمیشن گردشی متصل کنیم و به همین سادگی loader ما ایجاد خواهد شد .

برای شروع یک div بصورت زیر ایجاد می‌کنیم :

<div class="loader"></div>

اکنون برای این div استایل زیر را درنظر خواهیم گرفت که ظاهر کار را تولید کنیم :

.loader {
  border: 8px solid #f3f3f3;
  border-radius: 50%;
  border-top: 8px solid #e46773;
  width: 50px;
  height: 50px;
}

اکنون خروجی کار بصورت زیر است :

اکنون زمان آن است که استایل مربوط به انیمیشن و حرکت آن را نیز ایجاد کنیم ! یعنی قدم دوم !

قدم دوم ساخت loader ساده با CSS

برای اینکار تنها کافیست تا یک انیمیشن با حالت گردش یا همان rotate را ایجاد کنیم . البته دقت کنید که این دستور انیمیشن را باید قبل از دستور بالا داخل کدهای CSS خودتان بنویسید . انیمیشن بصورت زیر است :

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

اکنون بعد از نوشتن این انیمیشن ، لازم است تا آن را به ادامه استایل‌های کلاس loader اضافه کنیم . پس دستورات بالا به شکل زیر تغییر خواهند کرد :

.loader {
  border: 8px solid #f3f3f3;
  border-radius: 50%;
  border-top: 8px solid #e46773;
  width: 50px;
  height: 50px;
  -webkit-animation: spin 1s linear infinite;
  animation: spin 1s linear infinite;
}

پس از افزودن این بخش به کد ، خروجی شما دقیقا بصورت لودر ابتدای صفحه خواهد بود و حالت چرخش در آن ایجاد خواهد شد .

در این مرحله لودر شما آماده شده است و اکنون می‌توانید توسط جای گذاری آن در محل مدنظر صفحه ( که عموما وسط صفحه از لحاظ عمودی و افقی است ) و ایجاد یک پس زمینه در پشت آن یک لودر کامل داشته باشید .

ساخت صفحه PreLoader

برای ایجاد یک صفحه بزرگ بعنوان preloader در سایت ، می‌توانید همین div با کلاس loader را داخل یک div بزرگ قرار دهید که این div تمام صفحه بوده و به عبارتی حداقل ارتفاع آن برابر 100vh باشد . همچنین باید تمام صفحه را از نظر عرضی پوشش دهد . آخرین نکته مهم اینکه باید بروی تمامی المان‌های دیگر نمایش داده شود .

همچنین لازم است مقدار display آن از نوع flex بوده و ویژگی‌های align-items و همچنین justify-content آن برابر center باشد تا loader شما دقیق در وسط صفحه از لحاظ عمودی و افقی قرار گیرد . برای مثال کد html بصورت زیر است :

<div class="loader-main">
	<div class="loader">
	</div>
</div>

که برای کلاس loader-main می‌توان استایل زیر را نوشت :

.loader-main {
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	min-height:100vh;
	background-color:#515151;
	z-index:100;
}

اکنون شما یک صفحه لودر کامل دارید که می‌توانید بعنوان لودر ابتدای سایت از آن استفاده کنید . البته استفاده از لودر در ابتدای سایت اکثرا توصیه نمی‌شود اما المان loader که به تنهایی در ابتدای کدها خدمتتان آموزش دادیم ، در بسیاری از بخش‌های پروژه همچون پروژه‌های ایجکسی ، کارایی خوبی خواهد داشت . امید است این محتوا کوتاه و کاربردی برای شما علاقمندان به CSS ، مفید واقع شود .

امید قدیمی هستم ، 8 سال است که در زمینه طراحی و برنامه نویسی وب سایت فعالیت می کنم . توسعه دهنده فرانت اند ، طراح و برنامه نویس انواع وب سایت های وردپرسی ، فعال در زمینه تولید محتوا و سئو وب سایت

اشتراک گذاری محتوا