نمادها

شما اینجا هستید

آموزش ساخت دکمه لود متحرک (Loading Button)

آموزش ساخت دکمه لود متحرک (Loading Button) با html و css برای سایت

آموزش ساخت دکمه لود متحرک (Loading Button) تنها از کد های html و css استفاده می کند.

سلام برنامه برای ساخت این دکمه از Font Awesome استفاده کرده است

از این دکمه گرافیکی هر جایی که کاربر باید منتظر لود شدن بماند می توان استفاده کرد
برطبق UI نیز این کار بسیاد مناسب تر از بلاتکلیفی کاربر است

برای ساخت این دکمه می توانید به سایت Font Awesome رفته و css آن را دانلود کنید

و یا کد زیر را در head سایت خود قرار دهید:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

برای شروع کار کد های زیر رابه body خود اضافه کنید توجه کنید کد زیر برای ۳ دکمه می باشد براساس سلیقه یکی را انتخاب کنید

<button class="buttonload">
<i class="fa fa-spinner fa-spin"></i>Loading
</button>
<button class="buttonload">
<i class="fa fa-circle-o-notch fa-spin"></i>Loading
</button>
<button class="buttonload">
<i class="fa fa-refresh fa-spin"></i>Loading
</button>

سپس کد های زیر را به css قالب خود اضافه کنید

.buttonload{
	background:#4caf50;
	border:none;
	color:#fff;
	padding:12px 24px;
	font-size:16px;
}
.fa{
	margin-left:-12px;
	margin-right:8px;
}

کار ساخت دکمه لود تمام است

همچنین شما می توانید آموزش تصویری را از باکس دانلود موجود در زیر همین پست دانلود نمایید

اگر این مطلب آموزنده بود به ما امتیاز دهید

میانگین امتیاز / 5. تعداد آرا:

اولین کسی باشید که رای میدهید


این مجموعه فایل rar است که برای باز کردن آن نیاز به نرم افزار Winrar می باشد

دانلود آموزش ساخت دکمه لود متحرک (Loading Button) و سورس کد ها : نوع فایل:rar/video/code حجم فایل:20.24 مگابایت

بعد از اکسترکت (extract) کردن فایل ها آن را با یک پلیر تصویری ببینید

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

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

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.