آموزش ساخت دکمه لود متحرک (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;
}کار ساخت دکمه لود تمام است
همچنین شما می توانید آموزش تصویری را از باکس دانلود موجود در زیر همین پست دانلود نمایید